title: Change Background Color of a react tag when clicked
body: <p>I am populating list of data to in a react component</p>
  <pre><code>  &lt;center className={Styles.rangeContainer}&gt;
      {Object.keys(generatedRange).map((res) =&gt; (
        &lt;span key={res} onClick={change}&gt;
          &lt;input
            type=&quot;radio&quot;[enter image description here][1]
            name={res}
            id={`Range${res}`}
            keys={res}
            value={res}
          /&gt;
          &lt;label htmlFor={res} key={res}&gt;
            {res}
          &lt;/label&gt;
        &lt;/span&gt;
      ))}
    &lt;/center&gt;
  </code></pre>
  <p>what i want to do is change color of the span when input field is checked</p>
  <p>From the picture the span is the gray circle, the radio button is hidden in the span with opacity of zero, but i want to change the color of the span when the radio is clicked meaning checked</p>
  <pre><code>const change = (e) =&gt; {
  setShowModal(true);
  setSelectedPagesNow(e);
  </code></pre>
  <p>};</p>
  <pre><code>  async function setSelectedPagesNow(e) {
  let pages = [];
  try {
    Object.values(generatedRange[e.target.value]).forEach((ress) =&gt;
      pages.push(ress.page_url)
    );
    await setSelectedPages(pages);
    await setCurrentImage(pages[0]);
  } catch (error) {
    //catch error when label not clicked
    setShowModal(false);
  }
  </code></pre>
  <p>}</p>