Props in React
In this tutorial below, you will understand step-by-step how to use props in react js via a simple example.
Steps:
1-What are props
2-Idea of the example
3-Props from parent to child
4-Props from a child to parent
1-What are props
Props are kinds of vehicles that transport your data between the parent component and the child one.
2-Idea of the example
The idea of our example is about a web page that contains four containers, and each container represents a wallpaper. Once we click on 1, All others should disappear. The clicked one should be the only one that appears. To go back, You should click on the close button.
3-Props from parent to child
We will send our props data to the child component when we click on a container. This data will be: the wallpaper name inside the container and a function to return us to the containers page.
The previous process is completed by calling the component on our page and sending data as attributes, such as in the image below :
In the above image, we have sent two props: backgroundProp, and close.
backgroundProp contains variable wallName.
close contains function goBacktoContainer.
Using these props data inside the child component is easy cause we are receiving it as an argument (usually called props, but we can use the name we like ). All we need to do is argumentName.propName, such as the following images :
In the above image, we check the wallpaper name we receive via props and show the data depending on that.
When the wallpaper appears, we will use a close button to back to our containers, and here is where we need to send data to the parent component.
4-Props from a child to parent
Sending data from child to parent is tricky, but don’t worry. You only need to know the trick.
In our example, we have a state variable called isClicked. If this variable is False(which is the default value), The containers page with wallpapers will appear. Once we click one of them, isClicked becomes True, and the child component will show the chosen wallpaper depending on the name sent via prop.
To go back, we have to hit the close button, so when we click it, what is happening: we are telling the parent component that the isClicked variable return to False, So appear to us the wallpapers page again and hides the child component.
Props can’t send direct data from the child to the parent component. So to tell the parent component about this change, we applied our trick:
We declared a function in the parent component that changes our isClicked variable value. We sent it as a prop to the child.
In the child, when we click the close button. We will call the function that we received via prop as the image below:
Once we call the function, it will send the data to the parent component, and the previous view will appear.
The final result will be something like this:
You can check the example with the code from here:
I hope this article was helpful!
