Reducing code for same functionality for multiple elements in React

How to reduce bunch of code and set function setShowMenu somewhere in one line ?

<li className="listItem" onClick={() => setShowMenu(!showMenu)}>HOME</li>
<li className="listItem" onClick={() => setShowMenu(!showMenu)}>PRODUCTS</li>
<li className="listItem" onClick={() => setShowMenu(!showMenu)}>ABOUT</li>
<li className="listItem" onClick={() => setShowMenu(!showMenu)}>CONTACT</li>


There are several ways. One approach is to use an array:

// Somewhere it's created only once
const menu = ["HOME", "PRODUCTS", "ABOUT", "CONTACT"];

And since they all use the same handler, create just one rather than four (perhaps in the component render):

const onClick = () => setShowMenu(!showMenu);


{ => <li key={item} className="listItem" onClick={onClick}>{item}</li>)}

Note the key, since this is an array.