React - How to dynamically apply a CSS class to a single table row on hover-CodePudding

I'm trying to highlight the 'Position' and 'Team' cells in pink when any cell in a row is hovered over.

My hover class is being applied, but to the first two cells of every row rather the first two cells of a specific row.

No hover:

Hover:

The onClick event recognises individual rows (ie I can see the team.teamId when a row is clicked), but the 'tableStyles.rowHovered' class is applied to every row no matter which row I hover over.

const [inHover, setHover] = useState(false);
        
    const hoverStyles = () => {
        
            let styles = `${tableStyles.rowBorderless} ${tableStyles.pointer}`; 
        
            if (inHover) {
              styles  = ` ${tableStyles.rowHovered}`;
            }
        
            return styles;
          }
          
          const getTeamRow = (team, index, tableData) => {
        
            let positionShifts = getMinAndMaxPositions(team, tableData);
            //console.log(positionShifts);
        
            return (
              <tr id={'teamRow'   (index   1)} key={team.teamId} onMouseEnter={() => setHover(true)} onm ouseLeave={() => setHover(false)}>
                <td className={hoverStyles()} onClick={() => { setSelectedTeamId(team.teamId) }}>{index   1}</td>
                <td className={hoverStyles()} onClick={() => { setSelectedTeamId(team.teamId) }}>{team.teamName}</td>                       
        
                {tablePositionArray.map((td) => {
                  return <td id={'posCol'   td} className={getTableStyles(positionShifts.minPos, positionShifts.maxPos, td)} key={td}></td>                               
                })}                          
              </tr>
            );
          }

This isn't the entire code for my project, just the areas surrounding where my table is formed.

Thank you in advance.

CodePudding user response：

I can think of 2 options, the problem in your code is that the state of Hover is the state of all the rows.

to solve it you can by at least this 2 options: first and maybe the best : is just add a css to those columns and add the hover behavior for more info look here https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

or : in the hover state you can give index or id of the row to update the style.

    const hoverStyles = (index) => {
        
            let styles = `${tableStyles.rowBorderless} ${tableStyles.pointer}`; 
        
            if (index === inHover) {
              styles  = ` ${tableStyles.rowHovered}`;
            }
        
            return styles;
          }

and update the index with index of the row

<tr id={'teamRow'   (index   1)} key={team.teamId} 
       onm ouseEnter={() => setHover(index)} onm ouseLeave={() => setHover(null)}>
<td className={hoverStyles(index)} onClick={() => { 
        setSelectedTeamId(team.teamId) }}>{index   1}</td>
<td className={hoverStyles(index)} onClick={() => { 
        setSelectedTeamId(team.teamId)}}>