ReactJS Props

In this tutorial you will learn about the ReactJS Props and its application with practical example.

ReactJS Props

In ReactJS, when we define a custom components we have option to pass dynamic data is termed as props. The props is used as short for properties, props gives you way to pass information from one component to other. Props are similar to function arguments, they are passed to the component same way as an argument is passed to a function.

The props are immutable and can not be modified from inside the component. Props are passed from parent components down and cannot be changed. Inside the component props are available as this.props and can be used to render dynamic data in our component’s render method.

Consider following example :

Example :-

Here, we have called Hello component with {name: “W3Adda”} as its props, which can be accessed with this.props inside the component. Our Hello component returns a <h1>Hello W3Adda!</h1> element as the result which will be appended to document.getElementById(‘hello-world-wrapper’) .

Output :-

Screenshot_18

 

Default Props

In ReactJS, you can also setup default values for props, so if a prop is not passed when component is called it can still be set with default value.

Example :-

In the above code example , the Hello component has a default value for the name prop.

Output :-

Screenshot_20

In this tutorial we have learn about the ReactJS Props and its application with practical example. I hope you will like this tutorial.