score:3
Accepted answer
if(e.target.className === "class name of your element")
this.setState({hoveredEl: e.target.className})
score:2
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>;
}
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
- React: how can I get multiple image size?
- How to pass the dynamic state and setState to function typescript
- Split string per interval and append it to its corresponding array array
- React Material-UI override popover completely
- How to pass additional data to a function that adds things to an object?
- React Router 4 - Component Remounting Instead of Re-Rendering
- history.push not working in fetch callback
- Access token_unidentified
- Antd Table not re-rendering
- How do I get the date value from react-datepicker to register of the react-hook-form
- react-test-renderer How to Create a Component With Context?
- ReactJS - trouble looping through data array props with map
- React final form multipart data
- Issue using axios in react
- How to update object value without knowing the path to the key
- How to dynamically add a class to manual class names?
- Async/Await function gets called twice
- Reducer does not fire although action does
- FontAwesome inside React JSX
- How to resolve RollUp Material-ui "withStyles is not defined"
- Redux thunk wont update with response from async function
- how to make Highcharts React redraw without changing data
- Show initial form in Ant Design sample form
- How to open html5 input type="file" automatically?
- How do I convert image file to base64?
- How do you make React.js output valid xml instead of html?
- Detect when browser back button is pressed - ReactJS
- Display a loading bar during the retrieve data time
- Why am I unable to target a mapped out <li> from the button mapped out with it with React?
- function exported but still shows that function isn't exported, child function in component. react