What does “Warning: setState(…): Can only update a mounted or mounting component” mean?

Question

EDIT

What does "Warning: setState(...): Can only update a mounted or mounting component" mean?

Answer 1

Fisrt, rename all your React components as Camel Case like this.

class firstChild ... --> class FristChild
<fristChild> --> <FristChild>

Second, in your FirstChild render method, you should wrap your elements into an enclosing tag like this:

class FirstChild extends Component {
render(){
   return (
      <div>
        <input ... />
        <button ... />
      </div>
   )
}
}

Third, when you use cloneElement upon this.props.children , you should use Proptypes.<type> in your secondChildren instead of Propstypes.<type>.isRequired . Check it here to see why.

class SecondChild extends Component {
    static propTypes = {
      submitSuccess: React.PropTypes.bool, // remove isRequired
    }
}

Regardless all above, I have tested your code and it works fine.

Answer 2

You can try and use componentWillUnmount lifecycle function in order to check when the component is unmounted.

You can also use a flag to signal that the component is unmounted before setting the state:

saveName(nameText) {
    if (!this.isUnmounted){
        this.setState({submitSuccess: true});
    }
}

componentWillUnmount() {
    this.isUnmounted = true;
}