user2194838 user2194838 - 10 months ago 59
React JSX Question

Each child in an array or iterator should have a unique "key" prop.

I am getting error:

Warning: Each child in an array or iterator should have a unique "key" prop.
Can someone please help me where i have to put key

Code for nav component:

var React = require('React');
var $ = require('jquery');

var Menubar = React.createClass({
getInitialState: function() {
return {
items: []
componentWillMount: function() {
var _this = this;
this.serverRequest =
$.post("/nav", {}, function(result) {
render: function() {
var item = {
var ico = "fa fa-" + data.ico;
return (
<div id={data.sname} className="nav_item">
<div className="nav_icon">
<a href={data.url}>
<i className = {ico}>
return (
module.exports = Menubar;

Answer Source

You should be aware that React uses a virtual DOM to see if there are any changes to be flushed to the browser. To do this it needs to know exactly which element it is so that it can compare it next time the DOM changes as a result of state/prop change. This way react assigns id to each DOM element and compares the DOM for changes.

The reason you are shown this warning is that, when there is a set of DOM elements dynamically generated(in your case via a loop), you are required to tell react in someway so that it can recognize it back when it re-renders your DOM.

So the key attribute on the root element is required. Its a default practice to use index of the array for this, but i suggest you not to use this(read here). I suggest you use data.sname in your case as i find it to be unique as you are assigning it to id.

Your change would be something similar to this

// ..other pieces of code
return (
           <div id={data.sname} key={data.sname} className="nav_item">
// ..other pieces of code