Props in React JS
props is the short name for properties. These props allow user to pass data to components.
To learn about props you should have a general knowledge about components. So, hope you’re having general knowledge about components.
What is Props?
Props or properties are using to pass data from one component to another component.
Parent component can pass data to it’s child components by using props. By using props data can be passed only in uni-directional flow which means that data can only be pass from parent to child component.
These props help to make components more dynamic.
Furthermore, props in a component are read only and cannot be changed. So, the data that coming from parent component should not be changed by the child components.
Let’s do some examples to get a better understanding of props…
First we will see how to use props in class components. To do this first create a class component called Classcomprops.js in the react project.
After creating the Classcomprops.js component we can call this component inside the App.js component. App component is behave as the parent component and Classcomprops behave as the child component.
Output of the above code will be display as below.
When we call the child component multiple times, it will render the same string output again again as shown below.
Suppose that we want to get dynamic outputs for each child component because each child component have different data. As the solution to this we can use props. Let’s see how to do that using props.
Let’s think that each child wants to tell their name and the place they come from, instead of retyping the name and place for everybody we can pass their name and place as props.
So to do that we can pass the name and place as properties from the main/parent component(in this example App component) to the child component(in this example Classcomprops component) and render those properties into the browser.
Check the below picture of the code for better understanding.
By using props we can also display anything we want between the open and closing tag when invoking a component. This is facilitated by the ‘props.children’ keyword.
Check the below code to see how to do this.
Therefore, ‘props.children’ can be use when components does not know about their children ahead of time.
Now let’s see how we can use props in functional components.
To demonstrate example of props in functional component, I have created Create functional component called Funcomprops.
By using props in above methods we can make components dynamic.
So, I hope my post help you to have better understanding of props in react.
