title: How do I set the key in a manually created array in React/JSX?
body: <p>I am constructing a toolbar based on a few different states. Everything works fine, I can push in only the required (at the time) buttons and all is dandy. </p>
  
  <p>Because it is an array, React wants its precious key on each element. However manually setting them at each push point seems less than flexible, as I will need to manually update as I add more items. </p>
  
  <p>I tried a simple map post creation (see the _.map line) however item.key is read only. </p>
  
  <p>Is there a way to auto-assign a key based on the array index or similar?  </p>
  
  <pre><code>var toolbar = null;
  if(!this.state.loading) {
      toolbar = [];
      if(this.state.conditionOne) {
          toolbar.push(&lt;a onClick={this.toggleOne}&gt;Close Section One&lt;/a&gt;);
      } else {
          toolbar.push(&lt;a onClick={this.toggleOne}&gt;Show Section One&lt;/a&gt;);
      }
      if(this.state.conditionTwo) {
          toolbar.push((
              &lt;div&gt;
                  &lt;a onClick={this.otherAction}&gt;Other Action&lt;/a&gt;
                  &lt;a onClick={this.toggleTwo}&gt;Close Section Two&lt;/a&gt;
              &lt;/div&gt;
          );
      } else {
          toolbar.push(&lt;a onClick={this.toggleTwo}&gt;Show Section Two&lt;/a&gt;);
      }
  
      _.map(toolbar, (item, i) =&gt; { item.key = i; });
  }
  
  // Later
  return (
      Stuff and things
      {toolbar}
  );
  </code></pre>