How to Pass Data from Parent Component to Child Component in React

How to Pass Data from One Component to Other Component in React?

Props are used for passing data between the components. We usually use it to pass data from the parent component to the child component. Now, you can use props to pass data from parent to child component.

You should check out- What if we need to pass data from Child to Parent Component???

As an Example,

I have created two components one is - ParentComponent.js and other is - ChildComponent.js. 
Let’s see.

ParentComponent.js -

import React from 'react'

import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {

    render() {

        return (

            <div>

                <ChildComponent message="You can set the data from ParentComponent" />

            </div>

        );

    }

}

export default ParentComponent;

ChildComponent.js –

import React from 'react';

const ChildComponent = (props) => {

    return(

          <h2> {props.message} </h2>

    );

}

export default ChildComponent;