What if we want to pass data from one component to another that’s because we don’t want the component to display static data instead we want to pass dynamic data to the component and render it over the webpage. To achieve this React comes with props. Basically props are used to pass data from component to component. In this article, We will talk about React props in greater detail.
What are Props in React?
On splitting Welcome component separately it looks something like this as shown below :
Passing and Accessing props
You can pass props to a component (irrespective of its type) in the same way you define HTML attributes.
To access the props inside class component we make use of this .props.The ‘this.props’ is a kind of global object which stores all of a component’s props. The propName(ie. welcome), is the key of this object with value ‘Welcome to React’. You can see in the below code:
In a functional component, the props are defined in the same way we defined props for the class component but to access the props firstly, we have to add props parameter and then to read the props we make use of props instead of this.props . As shown in below code:
Since you will find always the props in the function signature, which most of the time is only the container object of your data, but not the data to be used, you can destructure the props early in the function signature. One would call it React props destructuring:
As you have seen, props enable you to pass variables from one to another component down the component tree. In the previous example, it was only a string variable. But props can be anything i.e integers, objects, arrays and even React components.
You can also define the props inline. In case of strings, you can pass props inside double quotes (or single quotes) too as in the below code.
But you can also pass other data structures with inline props. In case of objects, it can be confusing for React beginners, because you have two curly braces: one for the JSX and one for the object.
Basically, that’s how props are passed to React components. As you may have noticed, props are only passed from top to bottom in React’s component tree. There is no way to pass props up to a parent component. There is a limitation with props that is Props are read-only. We are not allowed to modify the content of a prop. Whatever the type of Component is – functional or class-based, none of them is allowed to modify their props.
In the above code if you will try to change the subject prop with some another value ‘Redux’ then it will give an error.
React …props syntax
The props spreading can be used to spread a whole object with key-value pairs down to a child component. It has the same effect as passing each value of the object by its own to the component as before. The child component gets the props the same way as before too. Another thing which builds up on top of the prop spread is the prop spread with rest.
As you can see, in the Welcome component the props are destructured but with a rest assignment which is called other in this case. So you have the subject prop but also the other prop which is essentially just an object with all the remaining properties (in this case only the description). Now you can spread the rest of the props to the Description component, because all the relevant props for the other components (here the Title component) were separated from it.
React props with default value
You can also inline it as a prop:
React’s children prop
The children prop in React can be used for composing React components into each other. Rather than using inheritance (due to the nature of React’s class components), React embraces composition over inheritance. That’s why you can just put any string, element(s) or React component(s) in between of the opening and closing component tags.
In this case, only the div element is put in between the component tags. Then in the child component, you can make use of everything which is in between of the tags (string, element(s), component(s)), by using React’s children prop. For instance, you can just render the content of the children prop like it is done in the above example.
In the end, props aren’t difficult. They are read-only and enable you to pass data down the component tree. Now, what if we want to manage some data inside the component that might change over time. To achieve this React comes with state . In the next article we will talk about state. So I hope this article gave you a good overview of the different usages of props in React.