title: How can I pass the index from javascript map function to the onclick function?
body: <p>I have an array of data that I'm iterating through, In the javascript map() function call I'm using the second argument that map() takes, 'index'. How would I pass index to the onClick event? I tried adding index to the list of arguments for onClick but all I can access are the events. Is there anyway I can pass the index through?</p>
  <p>I'd like to be able to execute the commented out line 'handleImageClick(productObjects[index])'. I need to let the parent component know which productObject was clicked on by the user.</p>
  <pre><code>export default function SideProducts(props) {
      
  const { productObjects, handleImageClick } = props;
  
  
  const onClick = (e) =&gt; {
      e.persist()
      console.log(e)
      //handleImageClick(productObjects[index])
  }
  
  console.log(productObjects)
      return (
          &lt;Wrapper&gt;
              {productObjects.map((productObject,index) =&gt; (
                  &lt;ImageWrapper key={index} src={productObject.image} onClick={(e) =&gt; onClick(e)}&gt;
                      
                  &lt;/ImageWrapper&gt;
              ))}
          &lt;/Wrapper&gt;
      )
  }
  </code></pre>