Skip to content
Related Articles

Related Articles

Improve Article
ReactJS Props Complete Reference
  • Last Updated : 16 Mar, 2021

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:

this.props.propName;

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.



Example:

Javascript




Javascriptimport React from 'react'
import ReactDOM from 'react-dom'
   
// Sample component to illustrate props 
class DemoComponent extends React.Component{ 
    render(){ 
        return
  

Output:

The Complete list of Props are listed below:

My Personal Notes arrow_drop_up
Recommended Articles
Page :