“Props” is short for properties. It is a special keyword in react that is used to pass JSX attributes and children to our user defined components when we call them. You can pass in multiple properties assigning their values using interpolation. Interpolation means inserting something of a different nature into something else. In this case we are inserting javascript into JSX.
Keep in mind props are unidirectional and immutable. This means they can only be passed from a parent element to a child element and are read-only for the receiving element. In other words, the data can be used in whatever way but cannot be changed.
Here is an example of what it looks like to pass and receive props:
Within our parent element we can call our child component.
let mood = “happy”;
<Greeting name={“Luka”} mood={mood}/>
Notice we have created the properties name and mood in two slightly different ways. For name we have input the string “Luka” directly whereas with mood we have saved “happy” to our mood variable and passed it in this way.
Below is our child component.
Notice we are receiving these values as properties on our “props” object. Also take note of the fact that we receive the “props” object the same way we would receive arguments for functions.
Var Greeting(props) => (
<div>
Hi I’m {props.name} and I’m feeling pretty {props.mood}.
</div>
)
We are also able to deconstruct our “props” object. This is shown below and works exactly the same way.
Var Greeting({name, mood}) => (
<div>
Hi I’m {name} and I’m feeling pretty {mood}.
</div>
)
Notice in this case “props” is dropped altogether.