setState not triggering a re-render when data has been modified

Question

Just started working with React, and it's been going relatively smooth up until this point.

I have a list, that contains X pre-defined items, which means that the list is always rendered with a given amount of rows.

This data is collected from a REST API, prior to the list rendering. The data contains variables relating to the list, as well as an array that contains each item within the list.

I chose the easy route, so I populate every component with a single JSON object named 'data', that contains everything necessary.

Rendering the list looks something like this:

<MyList data={data} />

Then, in the getInitialState of MyList:

dataInt: this.props.data.dataInt || 0,
dataStr: this.props.data.dataStr || '',
rows: this.props.data.rows || []

So I store my array of items (JSON) in the initial state of the list (parent), and when I choose to render the list, I first create all components (children) in an array, like this:

var toRender = [];
for(i = 0; i < this.state.rows.length; i++) {
    toRender.push(<ItemRow data={this.state.rows[i]} />);
}

and then I render like this:

return (
    <div className="item-container">
        <table className="item-table">
            {toRender}
        </table>
    </div>
);

The render-function of MyItem look something like this:

return (
    <tr>
        <td>{this.state.dataFromItem}</td>
    </tr>
);

Now, let's say I want to modify the child data from within the parent, with some new data I just got from the API. Same structure, just the value of one field/column has changed:

i = indexOfItemToBeUpdated;
var newRows = this.state.rows;
newRows[i] = data; // New JSON object with same keys, different values.
this.setState({ rows: newRows }); // Doesn't trigger re-render
this.forceUpdate(); // Doesn't trigger re-render

What am I doing wrong?

At first I thought it was because I was wrapping the render function of MyItem in a , but since it renders perfectly fine on the initial render, I will assume that is an acceptable wrapper.

After some testing, it seems that the parent view is re-rendered, but not the children (which are based on the data that is updated within the parent).

JSfiddle: https://jsfiddle.net/zfenub6f/1/

Could you put this in a jsfiddle or equivalent as it's not clear what the actual structure you have is or how the pieces interact as you've only included a few snippets of code. — WiredPrairie, Apr 05 '15 at 18:15
I've made a few changes since I posted, but the same problem still remains: https://jsfiddle.net/zfenub6f/1/ — Joel, Apr 05 '15 at 20:31
Can you minimize it to just be the specific issue and make it actually function though? There's a lot of code there, and it doesn't work on jsfiddle. You may need to just add a 'key' to each row. http://facebook.github.io/react/docs/multiple-components.html#dynamic-children — WiredPrairie, Apr 05 '15 at 20:58

score 2 · Answer 1 · answered Apr 22 '15 at 04:49

I think the problem could be the your are only using getInitialState for the Row. You are setting state with the passed in props. If the children get new props, getInitialState won't get called again. I always refer back to https://facebook.github.io/react/docs/component-specs.html to see all the lifecyle events. Try using componentWillReceiveProps(object nextProps) to set the state again. If you don't actually need state in the child, remove the use of state and just use props and it probably will work.

score 1 · Answer 2 · answered Apr 05 '15 at 21:59

If you're children are using State and state is not updating, what about props? does that render just fine? If the parent changes the state of the children and the children don't reflect that change those child components most likely need a unique key assigned to them which tells React that these items need to be updated when the state is updated on the parent. I ran into a similar issue where props inside the child updated to reflect the parent but the state of the child would not update. Once I added keys, the solution was resolved. For further reading on this check out this blog that initially hinted the problem to me.

http://blog.arkency.com/2014/10/react-dot-js-and-dynamic-children-why-the-keys-are-important/

There is also the official documentation from React that explains this situation.

http://facebook.github.io/react/docs/multiple-components.html#dynamic-children

I just changed so that only the parent uses state. The parent then uses the state version of 'rows' to pass on to its children. The children then does not store that value in their own state, they just render from props. And now the problem shifted. Now the child does re-render, but it re-renders as if props was empty. All rendered values are empty. EDIT: After some additional tweaking, it now works. I guess I should be more careful when using state in the future. Thanks for the tip! — Joel, Apr 05 '15 at 22:15

setState not triggering a re-render when data has been modified

2 Answers2