onMouseEnter active on all mapped elements - reactjs

Question

I have a simple component in which I map through an array of objects and display a li element for each object:
const [isHover, setHover] = useState(false);
return (
<ResultList>
{ props.movieList.length === 0 ? (<NoResults>No results were found...</NoResults>) : (null)}
{ props.movieList.map(movie => {
return (
<React.Fragment>
<li
key={movie.id}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}>
<p>
<span>{movie.original_title}</span>
</p>
{isHover && <AddMovieToDashboard />}
</li>
)
})}
</ResultList>
)
When I onMouseEnter on a li element I want to display another component AddMovieToDashboard. I've set this up by using the useState hook but as you might expect; this causes each li in the ul to display the AddMovieToDashboard component, and not just the one which is being hovered. I should probably use the unique key value from the li element somewhere but I can't find a good example how to do it.

Answer 1

How about moving the items to a separate component so they can have their own state:
function ResultListItem(props) {
const [isHover, setHover] = useState(false);
return (
<li
key={props.movie.id}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
<p>
<span>{props.movie.original_title}</span>
</p>
{isHover && <AddMovieToDashboard />}
</li>
)
}
function Component(props) {
return (
<ResultList>
{ props.movieList.length === 0 ? (<NoResults>No results were found...</NoResults>) : (null) }
{ props.movieList.map(movie => {
return (
<ResultListItem movie={movie} />
)
})}
</ResultList>
)
}