make onHover affect only one element in reactjs - reactjs

Question

im trying to show a button everytime a string is hovered, what im doing is working fine, but when i hover the string it will show every button in available string, i tried to pass the key but it still wont work, here is my code
const _showButton = () => {
setButton(true);
};
const _hideButton = () => {
setButton(false);
};
const _options = (uid) => {
return isButton ? <button key={uid}> ... </button> : null;
};
return(
{isProject.map((p) => {
return (
<div>
<Typography onMouseEnter={_showButton} onMouseLeave={_hideButton}>
{p.title} {_options(p.uid)}
</Typography>
</div>
);
})}
)
any help will be appreciated, thanks before, i know this question might be already asked before but i cant find the one that use a functional like me instead a class

Answer 1

it seems like button state is only one boolean, who controlled all mapped elements.
So you have two options,
First, change button state to an array
const [ button, setButton ] = useState(Array.from({ length: isProject.length }, _ => false))
and pass the index to functions and use specific slot to determine if a button should be visible
const _toggleButton = (i) => {
setButton(prev => prev.map((bool, idx) => i == idx ? !bool : bool);
};
const _options = (uid, i) => {
return button[i] ? <button key={uid}> ... </button> : null;
};
return(
{isProject.map((p, i) => {
return (
<div>
<Typography onMouseEnter={()=>_toggleButton(i)} onMouseLeave={()=>_toggleButton(i)}>
{p.title} {_options(p.uid, i)}
</Typography>
</div>
);
})}
)
Second is refactor mapped elemto it own component and declare state there, that way each elem will have it own state
{isProject.map((p) => <Component p={p} /> )}
function Component({p}) {
const [button, setButton] = useState(false)
const _showButton = () => {
setButton(true);
};
const _hideButton = () => {
setButton(false);
};
const _options = (uid) => {
return button ? <button key={uid}> ... </button> : null;
};
return (
<div>
<Typography onMouseEnter={_showButton} onMouseLeave={_hideButton}>
{p.title} {_options(p.uid)}
</Typography>
</div>
);
}

Answer 2

This is because _option runs in map and iterate over the whole list and the state is a single state which enables it for every item. You should consider setting "p's uid" in state variable (instead of true/false) and compare uid with the one is state in "_options" method.
const [selectedButtonUid, setSelectedButtonUid] = useState('');
const _showButton = (uid) => {
setSelectedButtonUid(uid);
};
const _hideButton = () => {
setSelectedButtonUid('');
};
const _options = (uid) => {
return selectedButtonUid === uid ? <button key={uid}> ... </button> : null;
};
return(
{isProject.map((p) => {
return (
<div>
<Typography onMouseEnter={()={_showButton(p.uid)}} onMouseLeave={_hideButton}>
{p.title} {_options(p.uid)}
</Typography>
</div>
);
})}
)