score:3
you should use your event.target
to achieve what you want. with this, you'll know which dropdown you're hovering and apply any logic you need. you can check for example if the dropdown you're hovering is the category dropdown like this:
if(e.target.classname === "class name of your element")
this.setstate({hoveredel: e.target.classname})
then you use it this state in your code to show/hide the element you want.
you can check an example on this fiddle i've created: https://jsfiddle.net/n5u2wwjg/153708/
i don't think you're going to need the onmouseleave
event, but if you need you can follow the logic i've applied to onmouseover
hope it helps.
score:2
1. you need to save the state of each <li>
item in an array/object to keep a track of hover states.
constructor(props) {
super(props);
...
this.state = {
hoverstates: {} // or an array
};
}
2. and set the state of each item in the event handlers.
handlemouseover = e => {
this.setstate({
hoverstates: {
[e.target.id]: true
}
});
};
handlemouseleave = e => {
this.setstate({
hoverstates: {
[e.target.id]: false
}
});
};
3. you need to set the id
(name
doesn't work for <li>
) in a list of menu items.
also make sure to add key
so that react doesn't give you a warning.
render() {
const { hoverstates } = this.state;
const menuitems = [0, 1, 2, 3].map(id => (
<li
key={id}
id={id}
onmouseover={this.handlemouseover}
onmouseleave={this.handlemouseleave}
classname={hoverstates[id] ? "hovering" : ""}
>
categories
{hoverstates[id] ? (
<ul classname="dropdown menu">
<li>#{id} computerss & office</li>
<li>#{id} electronics</li>
</ul>
) : null}
</li>
));
return <ul classname="menu">{menuitems}</ul>;
}
4. the result would look like this.
you can see the working demo here.
shameless plug
i've written about how to keep a track of each item in my blog, keeping track of on/off states of react components, which explains more in detail.
Source: stackoverflow.com
Related Query
- Multiple dropdowns without repeating code in ReactJS
- Django + webpack + reactjs: how to generate multiple pages by separate reactjs code for each url
- Make multiple pages in ReactJS without using react-dom-router
- Reusing a variable that is based on multiple redux props without duplication of code
- Can't remove ReactJS Element without breaking code
- How to get selected values from multiple dropdowns on button click using ReactJs
- Reactjs code works without error but executes twice
- Updating state in reactjs is repeating my code infinite - React JS
- Render react component without repeating code
- ReactJS - waiting for multiple setState to complete before executing next code
- ReactJS - Unable to run babel code without serving HTTP files
- Clean up code with multiple toggle states in reactjs
- ReactJS Patternfly reduce duplicated code for dropdowns
- Code optimization in Reactjs for multiple events
- How to add multiple classes to a ReactJS Component?
- Call multiple functions onClick ReactJS
- How to output text in ReactJS without wrapping it in span
- Show/Hide ReactJS components without losing their internal state?
- how to render multiple children without JSX
- Return multiple React elements in a method without a wrapper element
- Correct way of Creating multiple stores with mobx and injecting it into to a Component - ReactJs
- ReactJS local server crashes after editing file in Emacs even without saving
- Multiple Axios Requests Into ReactJS State
- ReactJS apply multiple inline styles
- How to call multiple functions on the same onClick event ReactJS
- Multiple file upload with reactjs
- How to deploy a react app to mutiple environments without multiple builds?
- How handle multiple select form in ReactJS
- Require reactjs modules without Browserify, Webpack or Babel
- Reactjs - Controlling Multiple Checkboxes
More Query from same tag
- How to find arithmetic operator and assign it and its index to globally accessible variable?
- Render JSX from material-ui Button onClick
- can't pass javascript in jsx (TypeError: Cannot read property 'props' of undefined)
- Webpack does not copy the images that i use into react components
- expand an array in react js
- Input tag value update after onChange but want to update it instantly
- How to allow for webpack-dev-server to allow entry points from react-router
- pagination and react-bootstrap
- Is there a way to detect API calls in react?
- Jest unable to mock a function inside FC
- If state is true than run this component
- How to sort a object by first element come
- Hot to show IconButton inside MenuItem but not if it selected
- Create filter in a store file with react
- How to change the submit button availability according to the dirty property of the Form?
- How to conditionally update react list components
- Reactjs reusable components using same data and onclick function
- How would I structure react components that must receive data from a modal
- Cannot read property 'handleChange' of undefined
- I'm facing this error in client side in React,js
- Going back to home page on refreshing/reloading or manually entering the URL in react
- React JSON mapped data. Trying to pass a setState variable from mapped function will not get the latest state on render
- Material-ui Card Flip Animation
- I need help pinpointing why my React Materials UI mobile version of AppBar will not render?
- declare variable to multiple state values
- How to efficiently pass props in nested components?
- Why is React onLeave={} being executed for every single page switch, instead only in the assigned one?
- How to check if the fields exist in a document
- React router not going to not found page
- How to store autocomplete selected option material-ui