React pass function to child parent not re rendering

Question

I have the following function:

update() {
    this.currentItem = [];
    //...Populate currentItem

    this.setState({
      currentItem
    });
  }

Which renders on the page like this;

render() {
   const { currentItem } = this.state;
   return {currentItem}
}

I then pass this function into a child component, like this:

<Component
   update={this.update.bind(this)}
/>

and then call it like this in my child component:

let { update } = this.props;
if (typeof update === "function")
  update();

The problem is that the update function does not re render the content I am updating on the parent page. As far as I understand this, whenever setState is called, render also gets called. render() does seem to be getting called, but it does not seem to display the updated value - why is this, and how can I resolve it?

I guess it could be to do with the fact that it is coming from a child component?

I have tried forceUpdate, but it does not re render the component either - what am I missing?

Answer 1

Try avoiding this.forceUpdate() because this will not fire shouldComponentUpdate() which is a performance hook for your Component in React. As, I saw that you are passing your state to child component and trying to update the parents state object from there, which against the law. You should create a method in parent and pass that method as a prop to the child component. It should look like this

constructor(props) {
    super(props);
    this.state = { loading: false };
    this.update = this.update.bind(this);
}
update(newState) {
    this.setState({loading: newState })
}
render() {
    return <ChildComponent update={this.update} />
}