title: Radio button with label in react js
body: <p><strong>Hello everyone !</strong></p>
  <blockquote>
  <p>Today I'm trying to make a selectable attribute like <a href="https://www.nike.com/fr/t/chaussure-air-force-1-07-pour-3nGnlt/CJ0952-100" rel="nofollow noreferrer">nike.com Air Force 1 product page to cart</a></p>
  </blockquote>
  <blockquote>
  <p>My problem is this:
  <a href="https://postimg.cc/hhZj8Ks8" rel="nofollow noreferrer"><img src="https://i.postimg.cc/RV4HBFnY/Capture-d-cran-2020-10-19-12-57-35.png" alt="Capture-d-cran-2020-10-19-12-57-35.png" /></a></p>
  </blockquote>
  <p>I want to select one item and store the value of the radio button in an state.</p>
  <p>For that I'm using <code>useRef</code>:</p>
  <pre><code>const getValueFromRadio = React.useRef(null)
  </code></pre>
  <p>For call this references I'm using <code>onClick(myFunction)</code> on the label tag</p>
  <pre><code>&lt;h1 className=&quot;text-center text-2xl&quot;&gt;{product.name}&lt;/h1&gt;
  &lt;div&gt;
      &lt;div className={'block my-3'}&gt;
          {product.attribute !== undefined ? product.attribute.map((item, index) =&gt; &lt;div className={'inline-block'} key={index}&gt;
          &lt;label onClick={labelOnclickHandler} className=&quot;cursor-pointer py-2 px-3 my-3 mx-2 border border-grey-500 hover:border-black h-3 rounded&quot; htmlFor={item.id}&gt;{item.value}&lt;/label&gt;
          &lt;input className=&quot;hidden&quot; ref={getValueFromRadio} type=&quot;radio&quot; id={item.id} value={item.value} name={'selectSize'}/&gt;
                &lt;/div&gt;)
           : null}
       &lt;/div&gt;
  &lt;/div&gt;
  
  // sorry for the piss of shit indentation.
  </code></pre>
  <p>If I have only one attribute reference will get the <code>S</code> size and the value that I store in my state is S:</p>
  <pre><code>const labelOnclickHandler = (e) =&gt; {
          const el = e.target.classList
          if (el.contains('border-grey-500')){ //toggling.
              el.remove('border-grey-500')
              el.add('border-black')
          } else {
              el.add('border-grey-500')
              el.remove('border-black')
          }
          setPrevElement(el) // get preview el for remove the border black.
          setSelectSize(getValueFromRadio.current.value) // state to cart.
  }
  </code></pre>
  <p>But if I have multiple attribute, react or references return me every time &quot;M&quot;, and i don't know if is a mistake or if is not the good way to make this.</p>