ReactJS|Props

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?

Normally you start out with React’s JSX syntax for rendering something to the browser when learning about React. Basically, JSX mixes HTML with JavaScript to get the best of both worlds.

On splitting Welcome component separately it looks something like this as shown below :

Now, the question is how to pass the data from one React component to another component(ie. from App to Welcome component)? React allows us to pass information to a Component using something called props (stands for properties). Props, in particular, is a javascript object which contains all the properties that you have defined while component invocation inside the parent component.

Passing and Accessing props

You can pass props to a component (irrespective of its type) in the same way you define  HTML attributes.

class-based component

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:

function-based component 

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

Another strategy for passing all props to a child component is the JavaScript spread operator. JavaScript’s spread operator in React is a useful power feature and you can read people referring to it as the React …props syntax even though it is not really a React feature but just a thing coming from JavaScript.

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

In some cases, you may want to pass default values as props. Historically the best approach to it was using JavaScript’s logical OR operator.

You can also inline it as a prop:

However, with JavaScript language additions there are other features you can use for it. For instance JavaScript’s default parameter for the default value of the prop:

The latter is the most popular choice when using only JavaScript for the default value. However, in case you are using React’s PropTypes, it’s is also possible to pass default prop values the React way:

After all, my recommendation would be using JavaScript’s default parameter, because everyone outside of the React world understands it as well.

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.