DEV Community

Shreyansi Shrestha
Shreyansi Shrestha

Posted on

{ Understanding PROPS in React.js }

PROPS meaning properties in React.js, and these properties/property can be passed from one component to another component ( for example : a property passed from parent component to the child component).

  • These properties are read-only.
  • Through these, parent component can send data to child component.

Image description

As we can we in the above picture, App.jsx is the parent component and Student.jsx is the child component. The key-value pair (name="Spongebob") from parent component is being passed to child component 'Student', and then that key value pair gets stored in PROPS object.

Now, to have the value of name from PROPS object, we use props.name and that is what we can see is done in the child component Student. So, this way we can retrieve value in child component from parent component ( via PROPS object).

In App.jsx :

Image description

In Student.jsx :

Image description

In localhost :

Image description

So, this is a topic in React.js that took me quite some time to understand and grasp the concept, but at the end, the satistaction of finally understanding it made all that effort worth it.

Top comments (0)