React Communication Between Components Parent to Child Components
Example
That the easiest case actually, very natural in the React world and the chances are - you are already using it.
You can pass props down to child components. In this example message is the prop that we pass down to the child component, the name message is chosen arbitrarily, you can name it anything you want.
import React from 'react';
class Parent extends React.Component {
render() {
const variable = 5;
return (
<div>
<Child message="message for child" />
<Child message={variable} />
</div>
);
}
}
class Child extends React.Component {
render() {
return <h1>{this.props.message}</h1>
}
}
export default Parent;
Here, the <Parent /> component renders two <Child /> components, passing message for child inside the first component and 5 inside the second one.
In summary, you have a component (parent) that renders another one (child) and passes to it some props.
