Explain props in React.js?

Web Development
#1

Props stand for “Properties.” They are read-only components. It is an object which stores the value of attributes of a tag and work similar to the HTML attributes. It gives a way to pass data from one component to other components. It is similar to function arguments. Props are passed to the component in the same way as arguments passed in a function.

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.

Passing and Accessing props:

<DemoComponent sampleProp = "HelloProp" />

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;

Passing properties from parent to child component using class components

When users pass the data from parent to child using the class components, they can access inside the child component using ‘this.props.property\_name‘.

Steps:

  • Embed the child component to the parent component.
  • Pass the data variable (props) with an assigned value to the child component as an argument while embedding it to the parent component.
  • If a user wants to pass multiple data variables (props), all variable names should be unique.
  • In the child component, access the data variable value using ‘this.props.variable\_name’.