Understanding unique keys for array children in React.js. In the sample, if we don’t give a key to the 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 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); |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
