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?

Does the initial state of the child component contain a property called `currentItem`? — m_callens, Apr 19 '17 at 15:40
But I am trying to update it on the parent, not on the child — Alex, Apr 19 '17 at 15:45
In your `render` function, what is the value of `currentItem` (try outputting it to the console)? In your `update` function, you assign to `this.currentItem` but then you pass a variable `currentItem` into the state, which (at least in this post) doesn't seem to be initialized. — forrert, Apr 19 '17 at 15:45
Possible duplicate of [How to update parent's state in React?](http://stackoverflow.com/questions/35537229/how-to-update-parents-state-in-react) — m_callens, Apr 19 '17 at 15:47
you will see the update if any thing get changed, if you use same data or array to create the ui items, nothing will change in ui. BTW **its a very bad habit of storing the ui items in state variable** if you are storing. are you sure your data is getting changed ? — Mayank Shukla, Apr 19 '17 at 15:48
@forrert If i log currentItem to the console in render, it outputs the correct value, but does not re render the component. the currentItem is initialsied and renders correctly before the update — Alex, Apr 19 '17 at 15:49
can you show what `currentItem` contains and the related `console.log` before/after it updates — Panther, Apr 19 '17 at 16:53
You mentioned that its not rendering the state change. Did you verify it in the react dev tool, by comparing the Prev state and current state. Do you see the change `currentItem ` being set the way you expected it to be. Also prefer binding functions in the constructor. ` // this is bad each re-render will generate a new reference and hence unnecessary update. ` — Himanshu Soni, Apr 19 '17 at 18:21

score 2 · Answer 1 · answered Apr 22 '17 at 20:04

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} />
}

score 0 · Answer 2 · answered Apr 19 '17 at 18:16

0

I am just guessing here but i think you set the initial value for the child component in the constructor and the value you want it to reflect points to its own state instead of the parents state

answered Apr 19 '17 at 18:16

Gilbert Nwaiwu

687
2
13
37

score 0 · Accepted Answer · answered Apr 20 '17 at 08:34

0

I needed to set the state to loading first, then when I set it to loading = false, it would re render that page

this.setState({
      loading:true
    });    

//...Do the work

this.setState({
      loading:false
    });

answered Apr 20 '17 at 08:34

Alex

3,730
9
43
94

React pass function to child parent not re rendering

3 Answers3