ReactJS | Props

Props stand for "Properties." They are read-only components.
Props are basically kind of global variable or object i.e. Components are sharing some information to other components using props.

They are immutable so we cannot modify them from inside the component. Inside the components, we can add attributes called props. These attributes are available in the component and can be used to render dynamic data in our render method.

Parent components are sharing data to child components through props. Data that we are passing in props can be a variable or a function. Like we use the attributes with the HTML tag.

We can set props and access it :

In the above code, we are displaying how to pass props in a child component named Testing. In this component there is a prop named sampleProp, there is a string data inside the props. The data from the parent component is passed to the child component.

Now let's see how to use props in the child component.
First of all when we declare the component we will assign a variable to the parameter of the function, then we can use that variable anywhere in our component.

In this  example we can see props being used in child component :

Output :- some value inside the train

Note: Props are read-only. We are not allowed to modify the content of a prop. Whatever the type of Component is – functional or class-based, none of them is allowed to modify their props.