How to have a edit icon show on a individual row item when it is hovered

Question

I am trying to make it so that when a user hovers over a row on react, a edit button/icon appears next to the folder name. I was thinking I can give them each individual states and using a key to keep track of them individually and using a useState to turn off onMouseOver and onMouseLeave.

Right now I am able to hover and have two icons show at the same time instead of just the one I am hovering over

Im not quite sure in how to use the key in conjunction with useState to keep track of which row is being hovered on, here's the code I have so far

const [isHovered, setIsHovered] = useState(false);

return(
               <TableBody>
                {sortedData.map(row => (
                    <KnowledgeBaseTable
                    key={row.root.folderName}
                    contents={row.root.contents}
                    >
                        <TableCell component="th" 
                        scope="row" 
                        //onMouseEnter={() => setIsHovered(!isHovered)}>
                        onMouseOver={() =>setIsHovered(!isHovered)}
                        onMouseOut={() => setIsHovered(isHovered)}
                        >
                          {row.root.folderName} 
                          {isHovered ? <EditIcon /> : <EditAttributesIcon/>}
                        </TableCell>
                        <TableCell>{convertISOtoLocalDate(row.root.metaData.updatedDate)}</TableCell>
                    </KnowledgeBaseTable>
                ))}
                </TableBody>
            ):

Answer 1

You can use onMouseOver to display the edit icon and then removing the icon on onMouseLeave. You can check other synthetic events here: https://reactjs.org/docs/events.html

Example code below

import React from 'react';
import './App.css';

function App() {

  function changeBackground(e) {
    e.target.style.background = 'red';
  }

  return (
    <div className="App">
      <button onMouseOver={changeBackground}>Hover over me!</button>
    </div>
  );
}

export default App;

Answer 2

If you want to debug and see which row has been hovered on, you can try something like this:

onMouseOver={()=>{
    console.log(row.root.folderName);
    setIsHovered(true);
}}

Also, logically speaking, you need to be more specific when setting the isHovered state. onMouseOver sets it to true; while onMouseOut sets it to false. Instead of just negating what it currently is. This may already solve the issue.