Accepted answer

your codepen is alomost fine, only thing you missed is proper key for message component,

for react to render components properly each component should have different key, so i changed the piece of code from

<Messages style="me" msg={} key={} sent={(this.state.sent[this.count])?this.state.sent[this.count]:''} />


<Messages style="me" msg={} key={this.count} sent={(this.state.sent[this.count])?this.state.sent[this.count]:''} />

and code-pen worked fine

EDIT this solves the propblem

instead of saving the components to state, dynamically build them. check this


componentWillReceiveProps should take nextProps.


Whenever the whole component rerenders, React matches all the components with the previous state/key. So if you give a unique key to the child on every time parent rerenders, the child will also re-render.

Lodash provides a function _.uniqueId() that generates a unique id every time it is called.

    <Child key={_.uniqueId('child_component')} />


Use this as a key for component


React won't allow you to enter two elements with the same key. This is how the react virtual DOM diffs the changes on re-render

Related Query

More Query from same tag