React Props
React allows us to pass data from one component to another component using Props which stands for properties. The data can come in different forms: numbers, strings, arrays, functions, objects, etc.
Props can only be passed from parent to child components (uni-directional flow).
There are cases however, with the use of callback functions where props can be passed from a child to a parent component. Furthermore, data received from props is read-only and cannot be modified by a child component receiving it.
How do you pass data with props?
Here is an example of how data can be passed by using props:
Break down
Firstly, we define the data we would like to pass down from the parent component and assign it to a child component’s “props” attribute.
In this example we use “name” as a defined prop. Then we pass in props as an argument to a function:
And finally, we use dot notation to access the prop data and render it:
Recap:
- Props stand for properties and is a special keyword in React
- Props are being passed to components like function arguments
- Props can only be passed to components in one-way (parent to child)
- Props data is immutable (read-only)
Resources :
