title: React incrementing variable within .map() function
body: <p>I am mapping through an array, and I want my variable <code>i</code> to be used as a unique key for my Components, however I do not know how (or where) to increment it correctly, if I add a <code>{i++}</code> within the <code>&lt;Component&gt;</code> tags then it will display the value of <code>i</code> on screen, and if I instead add <code>{this.function(i)}</code> and place the <code>i++</code> inside the function, it will call the function but the variable <code>i</code> will reinitiate to the value of <code>0</code> everytime, so the key value will not be unique. I need the value of <code>i</code> to be the key for the component and it has to be incremented by 1 everytime, does anyone know how I can achieve this? Also, as you can see in the code, when the component is clicked it will make a function call which will send the value of <code>i</code> of the clicked component as a parameter to the called function.</p>
  
  <p>Code:</p>
  
  <pre><code>  function(i) {
      console.log(i)
    }
  
    render() {
  
    var i = 0;
    var {array} = this.state;
  
    return (
      &lt;div className="App"&gt;
      {array.map(item =&gt; (
        &lt;Component key={i} onClick={(e) =&gt; this.function(i, e)}&gt;
          &lt;p&gt;{item.name}&lt;/p&gt;
        &lt;/Component&gt;
      ))}
      &lt;/div&gt;
    );
  }
  </code></pre>