title: ReactJS : What is the best way to give keys in array element
body: <p>I am just starting with ReactJS and tried solutions of other questions similar to this but no luck so far. </p>
  
  <p>Here is my working code :</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  
  const Numbers = ['2', '4', '6', '8'];
  
  const NumbersList = (props) =&gt; (
     &lt;ul&gt;
        {
            props.Numbers.map (
               number =&gt; &lt;li key={number}&gt;{number * 2}&lt;/li&gt;
            )
        }
      &lt;/ul&gt;
  )
  ReactDOM.render(&lt;NumbersList Numbers = {Numbers} /&gt;, document.getElementById('root') )
  </code></pre>
  
  <p>But when I am passing Numbers Array as :</p>
  
  <pre><code>const Numbers = ['4', '4', '6', '8']
  </code></pre>
  
  <p>I am getting this error :</p>
  
  <p><em>Warning: Encountered two children with the same key, <code>4</code>. Keys should be unique so that components maintain their identity across updates.</em></p>
  
  <p>So my Question is : What is the best way to give keys in this situation? And if I am using Number (as in above example) as Keys, what is the best solution to avoid this warning?</p>
  
  <p>Thank You!</p>