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>
)
}
Source: stackoverflow.com
Related Query
- onMouseEnter active on all mapped elements
- onMouseEnter and onMouseLeave triggers on all mapped elements
- Add 'active' class to a mapped item causes all items to have class active
- Modal dialog displays from all elements of mapped array. How to select each item by ts and react js?
- How to get all elements from an atomFamily in recoil?
- how to change hover for all elements ( border, text and arrow ) in react-select?
- How do I target DOM elements inside a react component, or should I avoid targeting DOM elements all together?
- Jest enzyme shallow test is not rendering all elements of the React component
- React/React Hooks: onChange function to change text is changing for all 3 elements simultaneously instead of just one
- array.map() is returning elements all together in React JS
- How to "scale" all the elements in Material-UI?
- How to make useEffect hook call the provided effect only if all the elements in inputs change?
- How can I set state on individual elements in a mapped function using React?
- Removing All Elements with feature X from Array, except the latest
- How can I loop through all the elements in my reactjs component?
- onclick changes all mapped items instead of just one
- How to make array elements all separately clickable in table row in html
- react-router 1.0.0-rc3 - All URLs are are mapped to only one React component
- How to remove all next elements from array in javascript or lodash
- Unable to update React.useState("") after joining all elements in array to single string
- Update all Object Elements of a State Array with React Hooks
- Set clicked child component active while all of its siblings inactive?
- Make the dark mode button above all elements used DarkMode.js
- How to style all elements using styled-components?
- How to pass all children elements of parent component?
- How to target DOM and change style in react with mapped elements
- How to initialize hook state . All state elements are missing
- What is the React way of adding active class and removing others on hover in li elements
- react : apply hover to all elements inside parent div
- Get length of all elements in array to create a filter in javascript/react
More Query from same tag
- Javascript dynamically inserted later on: how to make it run?
- React material-table
- × React - fetch('/') won't hit index route in Express.router
- Fired method on input with other component with event
- how to throw id parameter and display detailed data based on id at listview in react native
- Making POST request to SQL Server through React
- React props - set isRequired on a prop if another prop is null / empty
- Use a variable as an object key in reducer
- React js testing with Jest fails
- How to load proper value in Autocomplete MUI from DB
- Jest test fails because it doesn't recognise a props value
- React Onclick events for button
- How to add dynamic multiple text field in reactjs
- Render only child element in DOM instead of the whole JSX element
- How to create React elements in an array (with props) and then render them by simply mapping over that array?
- Passing any arbitrary function as a property value to Typescript React Component
- Re-render the component when the store state is changed
- When Table ellipsis attr is assigned `true` will show black text box. How can I change styled for textbox background color?
- Data not appearing after axios fetch (ReactJs)
- How I can change color of input selected in react-date-range package?
- Deploy ExpressJS with React in docker container
- Can't add new product to mongodb, having POST 500 error
- Next.js shared component (header) gets rerendered on new route
- How to use google fonts in a typescript react-app with JSS?
- Setting params on useEffect and getting the params it on createStackNav in React Navigation 5
- Adding new element to array with useState React
- Chrome doesn't save Express cookie in React app
- Datepicker react make one letter
- How do I ensure axios call sets the state in useEffect?
- How to declare types for javascript submodules from npm?