Auteur : Bilal Zouine

Description : Cet exemple implémente un formulaire permettant d'ajouter et de filtrer des contacts. Il utilise le hook useState pour gérer la liste des contacts, le formulaire, et le filtrage. Le composant permet également de supprimer des contacts de la liste.

Fonctionnalités :

• Ajouter un contact avec un identifiant unique.
• Filtrer les contacts par nom.
• Afficher une liste des contacts ajoutés.
• Supprimer un contact spécifique à partir de la liste.

Code :

                
 



        
import { useState } from "react"

export default function useStateTableau() {
    // Déclaration de l'état pour la liste des contacts
    const [listeContact, setListeContact] = useState([])

    // État pour gérer la valeur du filtre
    const [filter, setFilter] = useState('');

    // État pour stocker les informations d'un nouveau contact
    const [contact, setContact] = useState({
        idContact: 1, // Identifiant unique pour chaque contact
        contact: ''   // Nom du contact
    })

    // Fonction pour ajouter un nouveau contact à la liste
    const ajouterContact = () => {
        // Vérifie que le champ "contact" n'est pas vide
        if (contact.contact !== "") {
            // Ajoute le nouveau contact à la liste existante
            setListeContact(prevListContact => (
                [...prevListContact, contact]
            ))

            // Réinitialise le champ "contact" et incrémente l'ID
            setContact(prevContact => ({
                idContact: contact.idContact + 1,
                contact: ''
            }))
        } else {
            // Alerte si le champ "contact" est vide
            alert('Tous les champs sont obligatoires')
        }
    }

    // Fonction pour supprimer un contact en fonction de son ID
    const Delete = (contactId) => {
        setListeContact(
            listeContact.filter(contact => {
                // Supprime le contact si l'ID correspond
                if (contact.idContact === contactId) {
                    return false
                }
                return true
            })
        )
    }

    return (
        <div className="container mt-5">
            <fieldset className="w-75 mx-auto mb-3 alert alert-info">
                <legend className="text-center">Ajouter un contact</legend>

                <form>
                    <div className="row">
                        {/* Champ pour entrer un nouveau contact */}
                        <div className="form-group col">
                            <label>Nouveau contact</label>
                            <input 
                                type="text" 
                                className="form-control" 
                                name="contact" 
                                onChange={(event) => { 
                                    setContact(prevContact => ({ ...prevContact, contact: event.target.value })) 
                                }} 
                                value={contact.contact} 
                            />
                        </div>

                        {/* Champ pour filtrer les contacts par nom */}
                        <div className="form-group col">
                            <label>Filtrer par Nom</label>
                            <input 
                                type="text" 
                                className="form-control" 
                                name="filter" 
                                onChange={(event) => { setFilter(event.target.value) }} 
                                value={filter} 
                            />
                        </div>
                    </div>

                    <div className="form-group">
                        {/* Bouton pour ajouter un contact */}
                        <input 
                            type="button" 
                            value="Ajouter" 
                            className="btn btn-info fw-bold d-flex mx-auto bt-sm mt-3" 
                            onClick={ajouterContact} 
                        />
                    </div>
                </form>
            </fieldset>

            <h3 className="text-center text-white fw-bold">Liste des contacts</h3>
            <table className="table table-bordered table-sm w-75 mx-auto">
                <thead className="bg-info text-white text-center">
                    <th>Id</th>
                    <th>Contact</th>
                    <th>Action</th>
                </thead>
                <tbody>
                    {/* Filtre et affiche les contacts correspondants */}
                    {
                        listeContact.filter((f) => f.contact.includes(filter)).map((C) => {
                            return (
                                <tr>
                                    <td>{C.idContact}</td>
                                    <td>{C.contact}</td>
                                    <td>
                                        <div className="text-center">
                                            {/* Bouton pour supprimer un contact */}
                                            <button className="btn btn-danger btn-sm" onClick={e => { Delete(C.idContact) }}>
                                                Supprimer
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            )
                        })
                    }
                </tbody>
            </table>
        </div>
    )
}