title: Different ways to add a key to JSX element in loop in React
body: <p>I have been working on react for more than an year now. I have mostly played with iterating an array using .map, .forEach, .filter or using Object.keys and Object.values if it is an object.</p>
  
  <p>But what are the different ways to add a unique key to jsx element. Below is what I have been used to till now</p>
  
  <p>Using unique id from data as key to key prop:</p>
  
  <pre><code>const data= [{"id": "01", "name": "abc"}, {"id": "02", "name": "xyz"}];
  
  render(){
    const items = data.map(item =&gt; {
      return &lt;span key={item.id}&gt;{item.name}&lt;/span&gt;;
    }
    return(
       &lt;div&gt;
          {items}
       &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>Using index as key to key prop:</p>
  
  <pre><code>const data= [{"id": "01", "name": "abc"}, {"id": "02", "name": "xyz"}];
  
  render(){
    const items = data.map((item, i) =&gt; {
      let keyValue = i+1;
      return &lt;span key={keyValue}&gt;{item.name}&lt;/span&gt;;
    }
    return(
       &lt;div&gt;
          {items}
       &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>Is there any other ways to add a unique key to the jsx element apart from what I have mentioned above and which is most efficient and recommended?</p>