title: How to select only one element of a .map()?
body: <p>I have a <code>.map()</code> function which returns these buttons I would like to render according to the number of products pulled from woocommerce api. 
  I also have an onclick function in which when one button should only be selected and in turn the <code>className</code> toggles.</p>
  
  <p>However, with the script I have all the elements of the array get selected. I am familiar I have to pass my unique <code>key={}</code> to the functions to get my desired result but I am having trouble doing so :/  Here is my code with out my attempts <a href="https://codesandbox.io/s/018488478p" rel="nofollow noreferrer">https://codesandbox.io/s/018488478p</a> . </p>
  
  <p>I have had a look at these previous questions:
  <a href="https://stackoverflow.com/questions/48289315/how-to-toggle-class-for-the-only-one-element-on-click-in-react">How to toggle class for the only one element on click in react</a>
  <a href="https://stackoverflow.com/questions/44427203/how-to-modify-only-one-element-in-a-react-map-function">How to modify only one element in a react .map function?</a>
  but I cannot replicate it to my code for some reason - I am pretty new to this all so forgive my ignorance if its an easy fix! </p>
  
  <p>Also how come my div expands when the toggle happens its very annoying? :( 
  Do you think its better I use radio buttons? </p>