You should add a key to each child as well as each element inside children.
This way React can handle the minimal DOM change.
In your code, each <TableRowItem key={item.id} data={item} columns={columnNames}/>
is trying to render some children inside them without a key.
Check this example.
Try removing the key={i}
from the <b></b>
element inside the div’s (and check the console).
In the sample, if we don’t give a key to the <b>
element and we want to update only the object.city
, React needs to re-render the whole row vs just the element.
Here is the code:
var data = [{name:'Jhon', age:28, city:'HO'}, {name:'Onhj', age:82, city:'HN'}, {name:'Nohj', age:41, city:'IT'} ]; var Hello = React.createClass({ render: function() { var _data = this.props.info; console.log(_data); return( <div> {_data.map(function(object, i){ return <div className={"row"} key={i}> {[ object.name , // remove the key <b className="fosfo" key={i}> {object.city} </b> , object.age ]} </div>; })} </div> ); } }); React.render(<Hello info={data} />, document.body);
The answer posted by @Chris at the bottom goes into much more detail than this answer. Please take a look at https://stackoverflow.com/a/43892905/2325522
React documentation on the importance of keys in reconciliation: Keys