props in React

To pass a love letter from your house to your girlfriend's house you need a medium. Same in react you need a medium to pass data from one component to another component.

In function, if we want to pass anything from one function to another function, we use parameter. Example.

void printNumber (int number){
 cout<<number<<endl;
}

int main(){
int Number = 28;
printNumber(Number);
return 0;
}

In C++, in our printNumber() function we receive data from main function . Here we use "number" use as a parameter .

ReactJS are all about components. We need to pass data from one component to another. For this, we need to use props. props is a keyword of react. it stands for properties. props are used for passing data from one component to another.

But unfortunately, reactJS allows only side love. You can only send data to your girlfriend but you are not allowed to receive it. In react one side love allows us to pass data from parent component to child component. It's called unidirectional data flow.

Code :

import React from 'react'
const ParentComponentData = "Data From Parent Component";
class ParentComponent extends React.Component {
  render(){
    return (
      <ChildComponent name={ParentComponentData}/> 
    )
  }
};
const ChildComponent = (props) =>{
return <div>I get {props.name}</div>
}

export default ParentComponent ;

Here ParentComponent passes data to ChildComponent. ChildComponent accesses data using {props.name} .

 Output: I get Data From Parent Component