How to add or remove class to another element by ReactJS onClick?

import React from "react";
import "./styles.css";

export default function App() {
    const [show, setShow] = React.useState();
    return (
        <div className="App">
            <button className="add" onClick={() => setShow(true)}>
                Show
            </button>
            <button className="remove" onClick={() => setShow(false)}>
                Hide
            </button>
            <button className="toggle" onClick={() => setShow(!show)}>
                Toggle
            </button>
            <nav className={`nav ${show ? "show" : ""}`}>Navigation menu</nav>
        </div>
    );
}

“Thank you for taking the time to read the article. If you’re interested, you can learn more about me 🙂 I appreciate your attention and look forward to sharing more about myself with you. May your day be bug-free and your code compile on the first try!”

What does the abbreviation DOM stand for and what is a DOM?

DOM stand for “Document Object Model”.

The DOM defines a standard for accessing and manipulating documents. It means it is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.