Passing Props from Child to Parent Components? Hope this React article might be helpful.

Even I am also one of those billion searchers who searched for :

• “how to pass props from child to parent”
• “react js passing data from child to parent component”
• “return data from child to parent components in React JS”
• “Response from Child to Parent in React JS Components”
• “Pass data from Parent Component, process in Child Component and then return to Parent Component in React JS”

And the search goes on…

If you found any of these searched terms on auto suggestion, be confident that I am that fool :P

I tried in many ways, ran through many errors over 2 days or maybe 3, whatever. In these 1000s of hit and trial, finally did it, but it was neither passing props from Child Component to Parent Component, nor returning anything.

The actual answer is:
Data (or props) can flow from Parent Component to Child Component, but never flows back from Child Component to Parent Component.
In conclusion, data can never flow from Child to Parent.

The actual solution is:
Instead of passing data to props, pass a method (or called as function in native understanding) from Parent Component which will be a prop for a Child Component, pass the Child Components state variable as a parameter for the prop method (passed from Parent Component) and this prop method in Child will be retrieved by the Parent Component.

Didn’t understood? huh?
Well, that’s normal until an example. Let’s continue.

Example :

We will be making a form input that displays live text retrieved from form input as user types.
Following points to consider in order to understand the process:

• Live Text that is being displayed should be placed in Parent Component.
• The form input bar must be a Child Component.

Continue Below …

Real Demonstration Screenshot of passing data from Child Component to Parent Component

App.js

import React from 'react';
import Child from './Child';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputVal: ''
    }
    this.handleInputValue = this.handleInputValue.bind(this);
  }
// handle input value coming from the child component
  handleInputValue(val) {
    this.setState({ inputVal: val });
  }
render() {
    return (
      <div style={{ width: 500, margin: 50 }}>
        <h3>Parent Component</h3>
        <hr />
        Input Value: {this.state.inputVal}
        <Child handleInput={this.handleInputValue} />
      </div >
    );
  }
}
export default App;

Child.js

import React from 'react';
class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputVal: ''
    }
    this.onInputChange = this.onInputChange.bind(this);
  }
// handle input change event
  onInputChange(e) {
    this.setState({ inputVal: e.target.value });
    this.props.handleInput(e.target.value);
  }
render() {
    return (
      <div style={{ margin: '50px 0 50px 50px' }}>
        <h3>Child Component</h3>
        <hr />
        Input:
        <input 
              value={this.state.inputVal} 
              onChange={(e) => this.onInputChange(e)} 
        />
      </div>
    );
  }
}
export default Child;

In App.js, the method ‘handleInputValue(val)’ is passed as a prop:

<Child handleInput={this.handleInputValue} />

In Child.js, the prop method ‘this.props.handleInput(e.target.value)’ is being updated as user types in and is retrieved by Parent Component and setState of its variables to be displayed:

onInputChange(e) {
    this.setState({ inputVal: e.target.value });
    this.props.handleInput(e.target.value);
  }

Thank You for considering my ugly form.
Hope it helps and you have understood the major concept runs behind this ugly looking form.

The Complete Source Code can be found :
https://github.com/sayansinha5/Child-to-Parent-Component-in-React-JS