how to update parent state in child component and pass to parent state back?

Question

I am passing object from parent componet to child component and there some input fields in child component which handled in parent component as follow:

import React, { Component } from "react";
import Child from 'path';

class parent extends Component {
    constuctor(props){
        super(props);
        this.state = {
            obj :{
                //object
            }
        }
        this.handlerInput =  this.handlerInput.bind(this);
    }

    handlerInput(e){
        //logic to update state obj
    }
    render(){
        return(
            <div className="content">
                <Child changeHandle={this.handlerInput}  />
            </div>
        );
    };
}



export default parent;



import React, { Component } from "react";

class Child extends Component {
    render(){
        return(
            <div className="content">
                <input type="text" onChange={ this.props.changeHandle } name="xyz" />
            </div>
        );
    };
}



export default Child;

Now lets suppose if i have to use child component at multiple places so every time i have to define changeHandle function in parent component?

Any suggestion to update parent state from child ?

Possible duplicate of [How to pass data from child component to its parent in ReactJS?](https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs) — Engineer, May 29 '19 at 10:32

score 1 · Accepted Answer · answered May 29 '19 at 12:22

You can try something like that

import React, { Component } from "react";
import Child from "./Child";
class Parent extends Component {
    constructor(props){
        super(props);
    }
  state = {
      name: 'Parent',
  };

  changeHandle = e => {
    this.setState({ name: e.target.value });
  };

  render() {
    return (
      <div>
        <Child changeHandle={this.changeHandle} name={this.state.name}/>
      </div>
    );
  }
}

export default Parent;


import React, { Component } from "react";
class Child extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    name: "Child"
  };
  render() {
    return (
      <div className="content">
        <input
          type="text"
          onChange={this.props.changeHandle}
          name="xyz"
          value={this.props.name}
        />
      </div>
    );
  }
}

export default Child;

how to update parent state in child component and pass to parent state back?

1 Answers1

Linked