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 :-
|
1 2 3 4 5 6 7 8 9 |
// define a component with a props class Hello extends React.Component{ render () { return <h1>Hello, {this.props.name}!</h1>; } } // invoke the component by passing props ReactDOM.render(<Hello name="W3Adda" />, document.getElementById('hello-world-wrapper')); |
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 :-
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 :-
|
1 2 3 4 5 6 7 8 9 10 11 |
class Hello extends React.Component{ render () { return <h1>Hello, {this.props.name}!</h1>; } } Hello.defaultProps = { name: "World", }; ReactDOM.render(<Hello />, document.getElementById('hello-world-wrapper')); |
In the above code example , the Hello component has a default value for the name prop.
Output :-
