Exercice:Multi-select 

folder Projet: test_react_project
Créer une application qui permet de sélélectionner plusieurs Client

ListeClients .js

import React, { Component, useState } from "react";
import { Prev } from "react-bootstrap/esm/PageItem";

export default function ListeClients()
{
    const [clientsacceptes,setClientsacceptes]=useState([])

    const mesClients=[
        {id:1,nom:'a',prenom:'preA'},
        {id:2,nom:'b',prenom:'preB'},
        {id:3,nom:'c',prenom:'preC'}
    ]
   
const clients=[]
  const selectionner=(e)=>{
    //vérifier si le checkbox is selected
if(e.target.checked)
{
 
   
    const t=mesClients.filter(c=>(c.id==e.target.id))
   
    setClientsacceptes(
        [
        ...clientsacceptes, // récupéer les autre clients
        t[0]// Ajouer un nouveau
      ]
   
    );
}
else
{
   
   //supprimer un client déséctionné
   setClientsacceptes(
    clientsacceptes.filter(a => a.id != e.target.id)
  );


}


  }
    return  (
        <div>
            <table>
                <thead style={{background:'#777'}}>
                <th>Nom</th>
                <th>Prénom</th>
                <th>Accépté?</th>
                </thead>
                <tbody>
                    {mesClients.map(client=>{
                        return (
                            <tr style={{border:"1px solid #777"}}>
                                <td style={{border:"1px solid #777"}}>{client.nom}</td>
                                <td style={{border:"1px solid #777"}}>{client.prenom}</td>
                                <td style={{border:"1px solid #777"}}><input id={client.id} onChange={selectionner} type="checkbox"/></td>
                            </tr>
                        )
                    })}
                    <tr>
                     
                        <td colSpan={3}><button style={{width:'100%'}}>Valider</button></td>
                    </tr>
                </tbody>
            </table>
            <h3>La liste des clients accéptés:</h3>

            <table>
                <thead style={{background:'#777'}}>
                <th>Nom</th>
                <th>Prénom</th>
                </thead>
                <tbody>
                    {clientsacceptes.map(client=>{
                        return (
                            <tr style={{border:"1px solid #777"}}>
                                <td style={{border:"1px solid #777"}}>{client.nom}</td>
                                <td style={{border:"1px solid #777"}}>{client.prenom}</td>
                            </tr>
                        )
                    })}
                   
                </tbody>
            </table>
        </div>
    )
}