Sarkis Arutiunian Sarkis Arutiunian - 3 months ago 8
Javascript Question

React doesn't remap Array from state

Basically we have list component, something like this:

{this.state.answers[0] ? this.state.answers.map(answer =>
<li key={answer._id}>{answer.text}</li>) : null}


And when I update state component is re rendering but mapped list stay the same even when in
this.state
new, different data, list use old data.
Is that some kind of bug or what? Why list doesn't remap not after updating state not even after re rendering?

Answer

I moved mapped element, into separate component which use states and handlers from parent element and now it works.

{this.state.answers[0] ? this.state.answers.map(answer =>
    <Answer
         key={answer.displayOrder}
         answer={answer}
         optionsForSelect={this.state.optionsForSelect}
         _setRecommended={this._setValueForRecommended.bind(this, answer.displayOrder)}
         _setExclude={this._setValueForExclude.bind(this, answer.displayOrder)}
    />) : null}

It works because all props "besides handlers" in Answer I keep in his own state and use componentWillReceiveProps where I update states, to force re rendering for each mapped element, and finally it works.

Comments