Multiple dropdowns without repeating code in ReactJS

I have created dropdown onMouseOver with help of state. So far its working good enough. Because i don't have much knowledge about ReactJS i'm not sure is it possible to make multiple dropdowns with this or different method without writing all code over and over again.

onMouseOver

state

Here is my code:

..........
constructor(props)
super(props);
this.handleMouseOver = this.handleMouseOver.bind(this);
this.handleMouseLeave = this.handleMouseLeave.bind(this);
this.state =
isHovering: false


handleMouseOver = e =>
e.preventDefault();
this.setState( isHovering: true );
;
handleMouseLeave = e =>
e.preventDefault();
this.setState( isHovering: false )
;

............

<ul className="menu">
<li onMouseOver=this.handleMouseOver onMouseLeave=this.handleMouseLeave>Categories
this.state.isHovering?(
<ul className="dropdown">
<li>Computerss & Office</li>
<li>Electronics</li>
</ul>
):null
</li>
</ul>

............


So if I want to add one more dropdown I need to make new state and 2 more lines in constructor() and 2 functions to handle MouseOver/Leave.So repeating amount would be about this:

state

constructor()

constructor(props)
super(props);
this.handleMouseOver = this.handleMouseOver.bind(this);
this.handleMouseLeave = this.handleMouseLeave.bind(this);
this.state =
isHovering: false


handleMouseOver = e =>
e.preventDefault();
this.setState( isHovering: true );
;
handleMouseLeave = e =>
e.preventDefault();
this.setState( isHovering: false )
;


I will have maybe 10+ dropdowns and at the end will be load of codes. So is there any possibility to not repeat code ? Thank You!

e.target.id

2 Answers
2

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:

event.target

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

onMouseLeave

onMouseOver

Hope it helps.

<li>

constructor(props)
super(props);
...
this.state =
hoverStates: // or an array
;



handleMouseOver = e =>
this.setState(
hoverStates:
[e.target.id]: true

);
;
handleMouseLeave = e =>
this.setState(
hoverStates:
[e.target.id]: false

);
;


id

name

<li>

Also make sure to add key so that React doesn't give you a warning.

key

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>;



You can see the working demo here.

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.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.