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

Resources :