title: How to fix unique "key" prop in ReactJS table?
body: <p>Code:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;tr 
    key={playdata.idx} 
    tabIndex={playdata.idx} 
    className=&quot;border_bottom&quot; 
    onKeyDown={(e) =&gt; handleKeyDown(e, playdata.idx)} 
    onLoad={() =&gt; active(playdata.idx)}                             
    ref={playdata.idx === 0 ? myRef : null} 
    onMouseDown={(e) =&gt; ClickHighlight(e, playdata.idx)}
    style={isHighlighted ? { backgroundColor: '#254368' } : {}}
  &gt;
    &lt;td style={{ color: &quot;white&quot;, width: &quot;440px&quot; }}&gt;
      {playdata.ClipName}
    &lt;/td&gt;
    &lt;td style={{ color: &quot;white&quot;, width: &quot;250px&quot; }}&gt;    
      &lt;select 
        id=&quot;lang&quot; 
        value={playdata.ChannelName} 
        autoFocus
        className=&quot;btn_primary&quot; 
        onChange={e =&gt; setPlayer(e.target.value, playdata.idx)} 
      &gt;                                           
        {
          Channelname.map((val) =&gt; {                                              
            return (
              &lt;&gt;
                {
                  removeRedundant([...val, playdata.ChannelName]).map((val1,index1) =&gt; {
                    //console.log(val1,index1);
                    return &lt;option value={val1} key={index1}&gt;{val1}{index1}&lt;/option&gt;;
                  })
                }
              &lt;/&gt;
            )
          })
        }
      &lt;/select&gt;
  </code></pre>
  <p>I get this warning: <code>Each child in a list should have a unique &quot;key&quot; prop.</code> for the <code>option</code> tag in the <code>select</code> tag. How can I add a <code>key</code> to remove the warning?</p>