Butang tindak balas tidak menambah komponen pada halaman

Question

Butang "Tambah Item" harus mencetuskan borang timbul dengan medan input, tetapi borang itu tidak dipaparkan. Hanya gunakan butang untuk menunjukkan halaman kosong semasa membuat 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;

Mencuba melaksanakan dalam fail tunggal dan fail komponen yang berbeza tetapi borang masih tidak dipaparkan.

Answer 1

Pertama sekali, fail anda tidak dalam format yang betul. Sebagai contoh, baris 15 mempunyai kurungan tambahan. Sebaliknya, anda menggunakan fungsi yang tidak ditentukan dalam kod anda, seperti fungsi dispatch dan setItemName. Saya syorkan membaca Dokumentasi React rasmi tentang cangkuk.