0
336
ViewsReact - How to dynamically apply a CSS class to a single table row on hover
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)} onMouseLeave={() => 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.
1 answers
Answer question0
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}
onMouseEnter={() => setHover(index)} onMouseLeave={() => setHover(null)}>
<td className={hoverStyles(index)} onClick={() => {
setSelectedTeamId(team.teamId) }}>{index + 1}</td>
<td className={hoverStyles(index)} onClick={() => {
setSelectedTeamId(team.teamId)}}>