useState 不直接在 reactjs 中更新

Question

I have some div element and only header is revealed, when I click on it, it should display the form and if the form is displayed it should close it.

I tried this code, but it's not working, probably because useState is async so it's not updating right away.

I have tried using useEffect but my implementation wasn't succesful, here's a code snippet:

import React, { useState } from 'react';
import './AdminPageStyle.css';

const AdminPage = () => {
    document.title = 'Admin page';
    const [addPanel, setAddPanel] = useState(false);

    return(
        <main className="main_class">
            <h1>Hello admin!</h1>
            {/* Navbar */}
            <nav className="database-manipualtion_class">
                <div className="add-update-delete_class" id="add-panel_id">Add new animation</div>
                <div className="add-update-delete_class" id="update-panel_id">Update existing animation</div>
                <div className="add-update-delete_class" id="delete-panel_id">Delete animation</div>
            </nav>

            {/* Panel for adding new animation */}
            <div className="add_class" onClick={() => setAddPanel(!addPanel)} style={{display: addPanel ? 'flex': 'none'}}>
                <h3>Add new animation</h3>
                <form className="form_class">
                    <div className="input-field_class">
                        <label className="label_class" htmlFor="add-name">Add name</label>
                        <input type="text" name="add-name" id="add-name_id" placeholder="Awesome animation" />
                    </div>
                    <div className="input-field_class">
                        <label className="label_class" htmlFor="add-gifAdrress">Add gif adrress</label>
                        <input type="text" name="add-gifAdrress" id="add-gifAdrress_id" placeholder="/images/animation_gifs/loader.png" />
                    </div>
                    <button type="button" className="add-new-animation_class">Make new animation</button>
                </form>
            </div>

Answer 1

The problem was I was trying to display/hide the header and not the form, so this:

<nav className="database-manipualtion_class">
  <div className="add-update-delete_class" id="add-panel_id">Add new animation</div>
  <div className="add-update-delete_class" id="update-panel_id">Update existing animation</div>
  <div className="add-update-delete_class" id="delete-panel_id">Delete animation</div>
</nav>

{/* Panel for adding new animation */}
<div className="add_class" onClick={() => setAddPanel(!addPanel)} style={{display: addPanel ? 'flex': 'none'}}>

Should be translated to this:

<nav className="database-manipualtion_class">
  <div onClick={() => setAddPanel(!addPanel)} className="add-update-delete_class" id="add-panel_id">Add new animation</div>
  <div className="add-update-delete_class" id="update-panel_id">Update existing animation</div>
  <div className="add-update-delete_class" id="delete-panel_id">Delete animation</div>
</nav>

{/* Panel for adding new animation */}
<div className="add_class" style={{display: addPanel ? 'flex': 'none'}}>