Exercice:Filter teams 

import React, { useState } from "react";

export default function ListeMatches() {
  const [matchAffiches, setMatchAffiches] = useState([
    { equipe1: '', equipe2: '' }
  ]);

  const data = [
    { equipe1: 'barca', equipe2: 'real', datematch: '25-12-2020' },
    { equipe1: 'raja', equipe2: 'wydad', datematch: '22-12-2020' },
    { equipe1: 'fes', equipe2: 'tanger', datematch: '22-12-2020' }
  ];

  // Récupérer les dates uniques
  const uniqueDate = [...new Set(data.map(item => item.datematch))];

  // Fonction pour filtrer les matchs en fonction de la date sélectionnée
  const handleChange = (e) => {
    const selectedDate = e.target.value;
    setMatchAffiches(data.filter(match => match.datematch === selectedDate));
  };

  return (
   <div>
     <table>
       <tbody>
         <tr>
           <td>Veuillez sélectionner une date</td>
           <td>
             <select onChange={handleChange}>
                {uniqueDate.map(date => (
                 <option key={date}>{date}</option>
                ))}
             </select>
           </td>
         </tr>
       </tbody>
     </table>

     <table>
       <thead style={{ background: '#777' }}>
         <tr>
           <th>Equipe1</th>
           <th>Equipe2</th>
         </tr>
       </thead>
       <tbody>
          {matchAffiches.map(match => (
           <tr key={`${match.equipe1}-${match.equipe2}`}>
             <td>{match.equipe1}</td>
             <td>{match.equipe2}</td>
           </tr>
          ))}
       </tbody>
     </table>
   </div>
  );
}

avec classe:ListeMatches .js