How to setState in child component when child function called from parent component in ReactJS

Question

I want to call child function from parent component so I found a question here

Call child method from parent

So I used this way to to called it (From 1st Answer and 2nd approach).

Now issue is how to set state in the child getAlert function

class Parent extends Component {
  render() {
    return (
      <div>
        <Child ref={instance => { this.child = instance; }} />
        <button onClick={() => { this.child.getAlert(); }}>Click</button>
      </div>
    );
  }
}

class Child extends Component {
  constructor(){
     super();
     this.state = {message:""};
  }

  getAlert() {
    alert('clicked');
    //HERE I NEED TO SETSTATE 
  }

  render() {
    return (
      {this.state.message!=""?(
         <h1>{this.state.message}</h1>

      ):(

      <h1>Hello</h1>

      )}
    );
  }
}

In the getAlert function of child I need to setState but I couldn't able to do it. Please provide any solution

Answer 1

class Parent extends React.Component {
  render() {
    return (
      <div>
        <Child ref={instance => { this.child = instance; }} />
        <button onClick={() => { this.child.getAlert(); }}>Click</button>
      </div>
    );
  }
}

class Child extends React.Component {
  constructor(){
  super()
  this.state = {
    message: 'google'
  }
  this.getAlert = this.getAlert.bind(this)
  }
    
  getAlert() {
    alert('clicked');
    this.setState ({
      message: 'yahoo'
    }, () => {
      console.log(this.state.message) //the state value will be printed
    }); 
  }

  render() {
  console.log(this.state.message)
    return (
      <h1>Hello {this.state.message}</h1>
    );
  }
}

ReactDOM.render(
  <Parent />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

you have bind the getAlert() method to scope of the class ie). 'this'. I have added an sample code..pls check

Answer 2

The problem seems to be that when calling setState inside the getAlert function of child, this.setState will come undefined. This happens because this inside your getAlert function doesn't refer to the context of the React Component and setState is defined for the Component. You can solve this by binding the getAlert function.

You can do it in two ways.

First: using .bind(this) in constructor

class Child extends Component {

  constructor() {
     super();
     this.getAlert = this.getAlert.bind(this);
  }
  getAlert() {
    alert('clicked');
    //HERE I NEED TO SETSTATE 
  }

  render() {
    return (
      <h1>Hello</h1>
    );
  }
}

Second: use Arrow function

getAlert = ()  => {
    alert('clicked');
    //HERE I NEED TO SETSTATE 
  }

Check this answer on Why do we need to bind React functions

Check the working snippet

class Parent extends React.Component {
  render() {
    return (
      <div>
        <Child ref={instance => { this.child = instance; }} />
        <button onClick={() => { this.child.getAlert(); }}>Click</button>
      </div>
    );
  }
}

class Child extends React.Component {
  constructor(){
     super();
     this.state = {message:""};
  }

  getAlert = () => {
    alert('clicked');
    this.setState({message: "somemessage"});
  }

  render() {
    return (
      <div>{this.state.message!=""?(
         <h1>{this.state.message}</h1>

      ):(

      <h1>Hello</h1>

      )}</div>
    );
  }
}

ReactDOM.render(<Parent/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"/>