React button not adding component to page

Question

The "Add Item" button should trigger a popup form with input fields, but the form is not rendering. Just use a button to show a blank page when rendering.

import './App.css';

const InventoryManager = () => {
  
        dispatch(addItem(newItem));

        //Reset the input fields
        setItemName('');
        setItemDescription('');
        setItemPrice('');
        setItemImage('');

        // Close the popup form
        setShowPopup(false);
    };

    const handleClearForm = () => {
        // Clear the input fields
        setItemName('');
        setItemDescription('');
        setItemPrice('');
        setItemImage('');
    };

    return (
        <div>
            <h1>Inventory Manager</h1>

            <div id="buttons">
                <button onClick={() => setShowPopup(true)}>Add Item</button>
            </div>

            {showPopup && (
                <div id="add-item-popup">
                    <div id="popup-header">
                        <h2>Add Item</h2>
                        <button id="close-button" onClick={() => setShowPopup(false)}>
                            X
                        </button>
                    </div>
                   
      
                    </form>
                </div>
            )}

            <div id="inventory-gallery">{/* Render inventory items here */}</div>
        </div>
    );
};

export default InventoryManager;

Tried implementing in a single file and different component files, but the form still doesn't render.

Answer 1

First of all, your file is not in the correct format. For example, line 15 has extra parentheses. On the other hand, you are using undefined functions in your code, such as functions dispatch and setItemName. I recommend reading the official React documentation about hooks.