DEV Community

Mubasshir Ahmed
Mubasshir Ahmed

Posted on


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){

int main(){
int Number = 28;
return 0;
Enter fullscreen mode Exit fullscreen mode

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 {
    return (
      <ChildComponent name={ParentComponentData}/> 
const ChildComponent = (props) =>{
return <div>I get {}</div>

export default ParentComponent ;
Enter fullscreen mode Exit fullscreen mode

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

 Output: I get Data From Parent Component
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

18 Useful Github Repositories Every Developer Should Bookmark

18 Useful GitHub repositories every developer should bookmark: everything from learning resources and roadmaps to best practices, system designs, and tools.