title: React Component div id will not hide what used in map loop
body: <p>I have this code in an index.html file which loads with the application:</p>
  
  <pre><code>$(window).on('load', () =&gt; {
      $('#one').hide();
      $('#oneb').hide();
  });
  </code></pre>
  
  <p>And this affects the component:</p>
  
  <pre><code>import React from 'react';
  
  const Test = (props) =&gt; &lt;div id="MyDiv"&gt;
  
  
      &lt;div&gt;
  
          &lt;div id="one"&gt;
              THIS IS ONE
          &lt;/div&gt;
  
  
          {
  
              props.list.map((data, i) =&gt; {
  
                  return &lt;div id="oneb" key={i}&gt;
                     THIS IS ONEB
                  &lt;/div&gt;
  
              })
  
          }
  
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What is happening here is that div with id="one" will hide BUT id="oneb" will still show up.</p>
  
  <p>Why is this happening? How can I fix this?</p>