I'm working with a CSS module called 'styles' and this React code consists of a div containing two buttons. The state isMenuActive is used to determine if the menu is active or not. If the menu is active, the CSS class 'active' is applied and the menu appears; otherwise it does not.
<div className={`${styles.customerOptionsMenu} ${isMenuActive ? styles.active : null}`}>
<button onClick={() => { console.log('hi') }}>
<span className="material-icons">edit</span>Edit
</button>
<button onClick={() => {console.log('hi')}}>
<span className="material-icons">delete</span>Delete
</button>
</div>
When I click the buttons, nothing happens.
However, if I store the button as a global variable in developer tools and run button.click(), it works fine when the template literals are removed:
<div className={styles.customerOptionsMenu + styles.active}>
<button onClick={() => { console.log('hi') }}>
<span className="material-icons">edit</span>Edit
</button>
<button onClick={() => {console.log('hi')}}>
<span className="material-icons">delete</span>Delete
</button>
</div>
It works fine.
Why??? And what should I do to keep changing the classes when isMenuActive changes?
Edit: Full code with the button that changes isMenuActive
const [isMenuActive, setIsMenuActive] = useState(false)
const onBlur = () => { setIsMenuActive(!isMenuActive)}
return(
<td>
<button onBlur={onBlur} className={styles.customerOptions} onClick={() => setIsMenuActive(!isMenuActive)}>
<span className="material-icons">more_horiz</span>
</button>
<div className={`${styles.customerOptionsMenu} ${isMenuActive ? styles.active : null}`}>
<button onClick={() => { console.log('hi') }}>
<span className="material-icons">edit</span>Edit
</button>
<button onClick={() => {console.log('hi')}}>
<span className="material-icons">delete</span>Delete
</button>
</div>
</td>
)
New edit: The answer is in the comments by Pandaiolo. The problem was the onBlur={onBlur} code, when I removed it from the button everything worked fine!