title: ReactJS: Map array of images with unique pop up per image
body: <p>I'm new to React &amp; really stuck on how to create a popup which is unique to each image. </p>
  
  <p>I have 20 images, which all need to be clickable with a unique pop up (only one pop up at a time open). </p>
  
  <p>I am mapping out the images from an array. Can anyone help me with creating a pop up per image? The pop up must contain text and an image. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;div className={divStyle}&gt;
            {finalBoxArray.map(gooseberry =&gt; (
              &lt;Img
                key={allPlaces.infoid}
                className={gooseberryStyle}
                alt="gooseberry"
                fixed={about.fixed}
                style={{
                  top: gooseberry.top,
                  left: gooseberry.left
                }}
              /&gt;
            ))}
            
            
   array is as below:
   const allPlaces = [
    {
      infoid: 'box1',
      top: '145px',
      left: '935px',
      found: false,
    },
    {
      infoid: 'box2',
      top: '120px',
      left: '980px',
      found: false
    },  
    {
      infoid: 'box3',
      top: '560px',
      left: '450px',
      found: false
    },
    {
      infoid: 'box4',
      top: '380px',
      left: '760px',
      found: false
    },
    {
      infoid: 'box5',
      top: '460px',
      left: '600px',
      found: false
    },
    ]</code></pre>
  </div>
  </div>
  </p>