React loop with nested props

Question

How do I loop this props?

Tried looping something like this:

for (var key in this.props.data.data) {

    this.state.newData.push(
        <NewData key={key} />
    );
}

doesn't work.

Marouen Mhiri · Accepted Answer · 2017-09-01 18:36:39Z

1

you have to use setState to change the state:

var newArr = [];
for (var key in this.props.data.data) {
    newArr.push(<NewData key={key} />);
}
this.setState( {newData: newArr });

answered Sep 1, 2017 at 18:36

Marouen Mhiri

1,6471 gold badge16 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

etlovett · Accepted Answer · 2017-09-01 18:39:49Z

1

Something like this ought to work:

const newData = this.props.data.data.map(key => (<NewData key={key} />));
this.setState({ newData });

Two notable changes:

Using Array.prototype.map to iterate over the array rather than a for-in loop.
Using setState to set the state rather than doing so directly. Outside of the constructor, you should always use setState. See https://facebook.github.io/react/docs/state-and-lifecycle.html for more details.

answered Sep 1, 2017 at 18:32

etlovett

6391 gold badge7 silver badges15 bronze badges