12

**Hi,

How to re render parent component when anything changes in Child Component?**

Thanks,

3

2 Answers 2

16

To rerender the parent you have a couple options: you can change parent's state(triggering an update) or you can forcibly trigger an update. Either way the update will trigger a rerender.

Below is a demonstration of forcibly rerendering the parent using the this.forceUpdate() function.

// Example class component
class Child extends React.Component {
  constructor(props) {
      super(props);
      this.onBtnClick = this.onBtnClick.bind(this);
      this.state = {
          value: 0
      };
  }
  
  onBtnClick() {
      this.setState({ value: this.state.value + 1 });
      this.props.rerenderParentCallback();
  }

  render() {
    console.log(`Child rendered.`);
    return (
      <div>
        <span>Im the child with value {this.state.value}</span>
        <button onClick={() => { this.onBtnClick(); }}>Click to increment child</button>
      </div>
    );
  }
}

// Example class component
class Parent extends React.Component {

  constructor(props) {
    super(props);
    this.rerenderParentCallback = this.rerenderParentCallback.bind(this);
  }

  rerenderParentCallback() {
    this.forceUpdate();
  }

  render() {
    console.log(`Parent rendered.`);
    return (
      <div>
        <div>Im the parent</div>
        <Child rerenderParentCallback={this.rerenderParentCallback}/>
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Parent/>,
  document.getElementById("react")
);
button {
 margin: 10px;
}
<div id="react"></div>
<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>

Also you'll see that if you comment out the line this.props.rerenderParentCallback(); then only the child will be rerendered.

If you want to rerender the parent without using forceUpdate() then you could do something as simple as toggling a boolean in the parent's state via this.setState({ toggleRerender: !this.state.toggleRerender }) in the rerenderParentCallback function.

6

Add a function in parent component which will be called by child whenever some change happens in it, update the state of parent. Then, the parent will rerender due to state change. Go to react documentation to find better examples :)

1
  • 11
    would have been useful if you would have included a link to the docs of these examples you say.
    – svelandiag
    Mar 29, 2021 at 20:47

Not the answer you're looking for? Browse other questions tagged or ask your own question.