Le bouton Réagir n’ajoute pas de composant à la page

Question

Le bouton « Ajouter un élément » devrait déclencher un formulaire contextuel avec des champs de saisie, mais le formulaire ne s'affiche pas. Utilisez simplement un bouton pour afficher une page vierge lors du rendu.

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;

J'ai essayé d'implémenter dans un seul fichier et différents fichiers de composants, mais le formulaire ne s'affiche toujours pas.

Answer 1

Tout d'abord, votre fichier n'est pas au bon format. Par exemple, la ligne 15 comporte des parenthèses supplémentaires. D'un autre côté, vous utilisez des fonctions non définies dans votre code, telles que les fonctions dispatch et setItemName. Je recommande de lire la documentation officielle de React sur les hooks.