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>
):
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;
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.