How do I set the key in a manually created array in React/JSX?
<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>