React allows us to pass information to a Component using something called props (stands for properties). Props are basically kind of global variable or object. We will learn about these in detail in this article.
Passing and Accessing props: We can pass props to any component as we declare attributes for any HTML tag. Have a look at the below code snippet:
<DemoComponent sampleProp = "HelloProp" />
In the above code snippet, we are passing a prop named sampleProp to the component named DemoComponent. This prop has the value “HelloProp”. Let us now see how can we access these props.
We can access any props inside from the component’s class to which the props is passed. The props can be accessed as shown below:
We can access any prop from inside a component’s class using the above syntax. The ‘this.props’ is a kind of global object which stores all of a component’s props. The propName, that is the names of props are keys of this object.
The Complete list of Props are listed below:
- ReactJS | Methods as Props
- ReactJS | PropTypes
- ReactJS | Props – Set 1
- ReactJS | Props – Set 2
- Unidirectional Data Flow
- ReactJS | State in React
- ReactJS | State vs props
- ReactJS | Implementing State & Lifecycle