react custom dropdown not updating state - reactjs

Question

Trying to create a custom styled dropdown without using select. I'm trying to update the state value based on the click, but it still reads the value of 'choose". Any ideas on how to update this so the select works?
import React from "react"
import styles from "./style.module.less"
class DropDown extends React.Component {
constructor(props) {
super(props)
this.state = {
isActive: false,
value: 'CHOOSE'
}
this.buttonRef = React.createRef()
this.menuRef = React.createRef()
}
toggleState = (e) => {
let {name, value} = e.target;
this.setState({
[name]: value,
});
}
toggleMenu() {
console.log(this.state.isActive)
this.setState(prevState => ({ isActive: !prevState.isActive }))
}
render() {
return (
<div
className={styles.dropdown}
onClick={() => this.toggleMenu()}
>
<div className={styles.toggle} ref={this.buttonRef}>
{this.state.value}
<b className={styles.rotate}>+</b>
</div>
{this.state.isActive && (
<ul className={styles.menu} ref={this.menuRef}>
<li className={styles.menuItem} value="a" onChange={this.toggleState}>a</li>
<li className={styles.menuItem} value="b" onChange={this.toggleState}>b</li>
<li className={styles.menuItem} value="c" onChange={this.toggleState}>c</li>
<li className={styles.menuItem} value="d" onChange={this.toggleState}>d</li>
<li className={styles.menuItem} value="e" onChange={this.toggleState}>e</li>
<li className={styles.menuItem} value="f" onChange={this.toggleState}>f</li>
</ul>
)}
</div>
)
}
}
export default DropDown

Answer 1

Couple of things
I see you have refs for button and menu but don't see them being
used.
The issue was that there was event bubbling happening. Your div
onClick which was toggling the menu was getting bubbled so the event
from li was never really getting called.
I wrapped your jsx with a fragment, you want your conditional render of the ul outside of the div that is toggling the menu, so that no event bubbling occurs.
I changed the onChange to onClicks.
Event.target.value will not work on li even if you give the attribute value. so now im just passing it directly to the toggleState method.
You may want to put the values [a,b,c] in an array and map through it.
I removed the styles just to make it work on my local, you can put them back.
but here you go
import React from "react";
class DropDown extends React.Component {
constructor(props) {
super(props);
this.state = {
isActive: false,
value: "CHOOSE"
};
this.buttonRef = React.createRef();
this.menuRef = React.createRef();
}
toggleState = value => {
this.setState({
value
});
};
toggleMenu() {
this.setState(prevState => ({ isActive: !prevState.isActive }));
}
render() {
return (
<React.Fragment>
<div onClick={() => this.toggleMenu()}>
<div ref={this.buttonRef}>
{this.state.value}
<b>+</b>
</div>
</div>
{this.state.isActive && (
<ul ref={this.menuRef}>
<li onClick={() => this.toggleState("a")}>a</li>
<li onClick={() => this.toggleState("b")}>b</li>
<li onClick={() => this.toggleState("c")}>c</li>
<li onClick={() => this.toggleState("d")}>d</li>
<li onClick={() => this.toggleState("e")}>e</li>
<li onClick={() => this.toggleState("f")}>f</li>
</ul>
)}
</React.Fragment>
);
}
}
export default DropDown;