If you're becoming familiar with React, you know that coding in React breaks all of your code down into different components.
All of these different components have their own data that contributes to your application. A question of yours may be, how do you pass information from one component to another? That's when React props come into play. Often, props need to be rendered into different components to capture the functionality you need in web applications or to simply pass information through variables if needed. Props are short for properties, which are properties of an object.
In order to properly pass a prop, you need a certain syntax in which to pass it. For this, you will need a key-value pair. For every key, you need a value that holds the data that you are passing.
Look at the example below.
import react from 'react'
import Names from './Names'
function LandingPage() {
const nameOne = "Teejay"
return (
<div>
<Names name={nameOne} />
</div>
{/* In these examples the format will be key={value} */}
{/* The key can be any name of choice */}
{/* The value must hold the same name as the function or variable you are passing */}
)
}
The Example below is the receiving component.
export default function Names(props) {
return (
<h1>Hello Everyone, My Name is {props.name}</h1>
)
}
As you see above, you are passing 'props' as an argument and using dot notation to target the key, which is 'name.' When you pass props, the component you are passing them to has to receive them as an argument first. This is the only way it can be accessed when you pass it. For example, think of it like basketball. Let's say you want a certain component to shoot the basketball. In order for this component to shoot, the basketball must be passed to it. That's how props work.
Props also have a certain flow of data. They can only be passed downward. You can pass them children and sibling components only. There are ways to send data upwards, but that is a bit of a complex concept at the moment. Once you figure out how props properly work, it's another step closer to realizing what React can unlock as far as creativity goes. I hope this helped a bit with how props are passed from component to component. Enjoy, and keep coding!
Top comments (0)