title: How to create unique keys for React elements?
body: <p>I am making a React app that allows you to make a list and save it, but React has been giving me a warning that my elements don't have a unique key prop (elements List/ListForm). How should I create a unique key prop for user created elements? Below is my React code</p>
  
  <pre><code>var TitleForm = React.createClass({
      handleSubmit: function(e) {
          e.preventDefault();
          var listName = {'name':this.refs.listName.value};
          this.props.handleCreate(listName);
          this.refs.listName.value = "";
      },
      render: function() {
          return (
              &lt;div&gt;
                  &lt;form onSubmit={this.handleSubmit}&gt;
                      &lt;input className='form-control list-input' type='text' ref='listName' placeholder="List Name"/&gt;
                      &lt;br/&gt;
                      &lt;button className="btn btn-primary" type="submit"&gt;Create&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          );
      }
  });
  
  var ListForm = React.createClass({
      getInitialState: function() {
          return {items:[{'name':'item1'}],itemCount:1};
      },
      handleSubmit: function(e) {
          e.preventDefault();
          var list = {'name': this.props.name, 'data':[]};
          var items = this.state.items;
          for (var i = 1; i &lt; items.length; i++) {
              list.data.push(this.refs[items[i].name]);
          }
          this.props.update(list);
          $('#'+this.props.name).remove();
      }, 
      handleClick: function() {
          this.setState({
              items: this.state.items.concat({'name':'item'+this.state.itemCount+1}),
              itemCount: this.state.itemCount+1
          });
      },
      handleDelete: function() {
          this.setState({
              itemCount: this.state.itemCount-1
          });
      },
      render: function() {
          var listItems = this.state.items.map(function(item) {
              return (
                  &lt;div&gt;
                      &lt;input type="text" className="list-form" placeholder="List Item" ref={item.name}/&gt;
                      &lt;br/&gt;
                  &lt;/div&gt;
              );
          });
          return (
              &lt;div&gt;
                  &lt;form onSubmit={this.handleSubmit} className="well list-form-container"&gt;
                      {listItems}
                      &lt;br/&gt;
                      &lt;div onClick={this.handleClick} className="btn btn-primary list-button"&gt;Add&lt;/div&gt;
                      &lt;div onClick={this.handleDelete} className="btn btn-primary list-button"&gt;Delete&lt;/div&gt;
                      &lt;button type="submit" className="btn btn-primary list-button"&gt;Save&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          )
      }
  });
  
  
  var List = React.createClass({
      getInitialState: function() {
          return {lists:[], savedLists: []};
      },
      handleCreate: function(listName) {
          this.setState({
              lists: this.state.lists.concat(listName)
          });
      },
      updateSaved: function(list) {
          this.setState({
              savedLists: this.state.savedLists.concat(list)
          });
      },
      render: function() {
          var lst = this;
          var lists = this.state.lists.map(function(list) {
              return(
                  &lt;div&gt;
                      &lt;div key={list.name} id={list.name}&gt;
                          &lt;h2 key={"header"+list.name}&gt;{list.name}&lt;/h2&gt;
                          &lt;ListForm update={lst.updateSaved} name={list.name}/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              )
          });
          var savedLists = this.state.savedLists.map(function(list) {
              var list_data = list.data;
              list_data.map(function(data) {
                  return (
                      &lt;li&gt;{data}&lt;/li&gt;
                  )
              });
              return(
                  &lt;div&gt;
                      &lt;h2&gt;{list.name}&lt;/h2&gt;
                      &lt;ul&gt;
                          {list_data}
                      &lt;/ul&gt;
                  &lt;/div&gt;
              )
          });
          var save_msg;
          if(savedLists.length == 0){
              save_msg = 'No Saved Lists';
          }else{
              save_msg = 'Saved Lists';
          }
          return (
              &lt;div&gt;
                  &lt;TitleForm handleCreate={this.handleCreate} /&gt;
                  {lists}
                  &lt;h2&gt;{save_msg}&lt;/h2&gt;
                  {savedLists}
              &lt;/div&gt;
          )
      }
  });
  
  ReactDOM.render(&lt;List/&gt;,document.getElementById('app'));
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;h1&gt;Title&lt;/h1&gt;
      &lt;div id="app" class="center"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>