Understanding the concept of props in React.Js

What is Props?

React props are properties that are used to pass data from one react component to the other. Here, we look at components as JavaScript Functions that accept input(props) and return react elements showing what should be rendered on the screen.

In React, data flow is unidirectional that is, data is always passed from the parent component down to the child component. Also, data is read only, child component cannot change data coming from the parent component. Here when we pass down data as props from the parent components it cannot be changed.

What data can props be used to pass?

Props can be used to pass any kind of data such as;

Important tips to know with Props

Now,Let get to see how props work by writing some logic here, From our code, we can see that the ChildrenComponent has been imported to the ParentComponent. This will make the ChildrenComponent reusable several times in the parent component.title is the prop property that contains dynamic data. We pass the data as props down from the Component to the childrenComponent. And we get something like this below

Also, from the ChildrenComponent we have something like this below.

From our code, the  props is passed like giving an argument to a function in the ChildrenComponent. Props is an object and we render props object by string interpolation using {props.title}. This {props.title} get the data that was passed in from the ParentComponent to this ChildrenComponent.

The use of props allows you to reuse more react code and avoid you repeating several lines of code. Here we reuse the childrenComponent several times by passing different data through it as props.

Finally, we get to see the  the various different data rendered on  our screen below

Thank you for today. I believe this blog has helped you in understanding the key features of props