score:1

Accepted answer

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>
  )
}

Related Query

More Query from same tag