Passing data from parent to child components

Basically, React have one-way data-binding feature, another words data only goes one way. React has props attribute for passing data from parent to child components. Props always passed down from the parent to the child components through out the application. A child component can never send a prop back to the parent component that is called unidirectional data flow.This is simplest way in React to transfer data using props.

Passing data from parent to child components

You can see the below step by step guide, pass the value parent to child component.
Step 1. In, Parent component we are passing the value of color parent to child component using inputVal key. Also you can enter your color name in text box and see the effect of text color.

Step 2. In, Child component we are receiving the value of color parent component using this.props from inputVal value inside render method. But you can’t enter your color name in text box and you can see inline style of text color using style={{color:inputVal}}.

Above example correctly working and you can see the demo from below link for passing data parent to child component.

Demo & Preview

Summary : In this section, We have discussed with you regarding passing data parent to child component. If you will enter the color name in text box. Then, As per color name, text color will be change and same color name will show in child component text box.

If you want to pass the data child component to parent component. You can use callback and state in your application.


Leave a Reply

2 Comments on "Passing data from parent to child components"

avatar
  Subscribe  
newest oldest most voted
Notify of
Vineet
Guest
Vineet

Hi, what is the way to pass the data from child to parent in React JS.

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.