In React.js, props (short for properties) are the way to pass data from a parent component to a child component. This allows for a unidirectional data flow, where the data flows from the parent to the child, and not the other way around.

Suppose we have a parent component named Dad and a child component named MySelf. Inside the MySelf component, we have another child component called SpecialPerson. The goal is for the Dad component to send a gift to the SpecialPerson component.

Dad Component:
The Dad component wants to send a gift to the SpecialPerson component. To do this, it will pass a prop called gift to the MySelf component.
<MySelf gift="Gold Ring" />

MySelf Component:
The MySelf component receives the gift prop as an object in its function parameter.
const MySelf = ({ gift }) => {
// Now, theMySelfcomponent can access thegift` prop
return (

I received a {gift} from my dad!

);
};

SpecialPerson Component:
The MySelf component then passes the gift prop to the SpecialPerson component.

const SpecialPerson = ({ gift }) => {
// The SpecialPerson component can now access the gift prop
return (
<div>
<p>Wow, I received a {gift} from my dad through my myself!</p>
</div>
);
};