How to change the background color of th on click in react js?

Question

I want to change the background color of th when I click on tr. This is my minimal code:

props.params.map((item, i) => {
   return (
        <>
             <tr key={i} onClick={() => attributeClicked(i) } >            
                    <th className={'a'+i}>                    
                         <span>{ item.label }</span>                
                    </th>
             </tr>
        </>
         )
  })


function attributeClicked (i: number) {
    document.getElementsByClassName(`a${i}`)[0].style.backgroundColor = "red!important";
}

However this code is not working. Also when I hover over style it shows the error Property 'style' does not exist on type 'Element'.ts(2339)

Answer 1

Hello look a this example using ref to access to the element and change the color of the font or whatever you want.

import { createRef } from "react";
export default function App() {
  const renderTh = (data, index, ref) => {
    return (
      <th ref={ref} key={index} onClick={() => redColor(ref)}>
        {data}
      </th>
    );
  };

  const redColor = (ref) => {
    if (!ref.current) return;
    ref.current.style.color = "red";
  };

  const dataSet = ["one", "two", "three"];
  const refArray = [];
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <table>
        <thead>
          {dataSet.map((data, index) => {
            const ref = createRef();
            refArray[index] = ref;
            return renderTh(data, index, ref);
          })}
        </thead>
      </table>
    </div>
  );
}