score:1

Accepted answer

your improved code with live demo https://codesandbox.io/s/laughing-sky-kk97b

what need to change <grandchild number={this.props.number} changenumber={this.props.changenumber} value={this.props.data} onchange={this.props.onchange}/>

complete code

class grandchild extends react.component {
  constructor(props) {
    super(props);
    this.handlechange = this.handlechange.bind(this);
  }
  changenumber = () => {
    this.props.changenumber(); //call child method
  };

  handlechange(e) {
    this.props.onchange(e.target.value);
  }
  render() {
    const data = this.props.data;
    return (
      <div>
        <h1>the number is {this.props.number}</h1>
        <input type="text" value={data} onchange={this.props.onchange} />
        <button onclick={this.changenumber}>increase number by 1</button>
      </div>
    );
  }
}

class child extends react.component {
  render() {
    return (
      <div>
        <grandchild
          number={this.props.number}
          changenumber={this.props.changenumber}
          value={this.props.data}
          onchange={this.props.onchange}
        />
      </div>
    );
  }
}

class app extends react.component {
  constructor(props) {
    super(props);
    this.state = {
      number: 1,
      data: ""
    };
  }
  handlechange = e => {
    this.setstate({ data: e.target.value });
    console.log(e.target.value);
  };
  changenumber = () => {
    this.setstate(prevstate => {
      console.log(prevstate, this.state.data);
      return {
        number: prevstate.number + 1
      };
    });
  };
  render() {
    const data = this.state.data;
    const input = data;
    return (
      <child
        number={this.state.number}
        changenumber={this.changenumber}
        data={input}
        onchange={this.handlechange}
      />
    );
  }
}

export default app;

Related Query

More Query from same tag