How to pass data from Child component to Parent component in React

Today we will show you how to pass data from child component to parent component in React JS.

Passing Data Between React Components, React | pass data from child to parent component, Passing data from Child to Parent Components, How to pass props to components in React, Parent-Child Component Communication, how to pass value from one component to another component in reactjs.

We have created the post where we described How to pass data from Parent component to Child component but in this tutorial we will explain to you how to pass data from child to parent component where you can pass data as string, object, array, function, etc.

Let’s take an example where we will have child component which contains the input element with submit button and then pass the input value from child to parent component on the click event of the submit button.

Demo & Source Code

Github Repository

Way to pass data from child component to parent component

1. Create react application
2. Handle value of child element in Parent component
3. Create Child component to pass value in Parent component
4. Output

1. Create react application

First you have to create the startup react application. You may use the create-react-app for same.

2. Handle value of child element in Parent component

We will consider App.js file as parent component. After that create a function in parent to handle value which coming from Child component and store it into the state variable of the parent component.

Now we will import the child component (Child.js) and pass the created function in child component as props.

Please look at the below code as parent component.

App.js

import React, { Component } from 'react';
import Child from './Child';

class App extends 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;

3. Create Child component to pass value in Parent component

In the child component, we will take two elements as input and button and pass the value of the input element to the parent component using the onClick event of the button.

To pass the value in parent, we will execute parent function via props. Please check below code of Child component.

Child.js

import React, { Component } from 'react';

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputVal: 'Clue Mediator'
    }
    this.onInputChange = this.onInputChange.bind(this);
    this.hanldeSubmit = this.hanldeSubmit.bind(this);
  }

  // handle input change event
  onInputChange(e) {
    this.setState({ inputVal: e.target.value });
  }

  // handle button click event and pass data in parent
  hanldeSubmit() {
    this.props.handleInput(this.state.inputVal);
  }

  render() {
    return (
      <div style={{ margin: '50px 0 50px 50px' }}>
        <h3>Child Component</h3>
        <hr />
        Input:
        <input value={this.state.inputVal} onChange={this.onInputChange} style={{ margin: '0 10px' }} />
        <input type="button" value="Submit" onClick={this.hanldeSubmit} />
      </div>
    );
  }
}

export default Child;

4. Output

Output - How to pass data from Child component to Parent component in React - Clue Mediator