Exercice:Filter teams
ListeMatches .js
import React, { Component, 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éer les
const uniqueDate=[];
const lesdates=[];
data.map(a=>{
lesdates.push(a.datematch)
});
//supprimer les doublants
for(let i=0;i<lesdates.length;i++){
if(!uniqueDate.includes(lesdates[i]))
{
uniqueDate.push(lesdates[i])
}
}
const changer=(e)=>{
setMatchaffiches(
data.filter(s=>(s.datematch==e.target.value))
)
}
return (
<div>
<table>
<tr>
<td>Veuillez Sélectionner une date</td>
<td>
<select onChange={changer}>
{uniqueDate.map(ligne=>{
return (
<option>{ligne}</option>
)
})}
</select>
</td>
</tr>
</table>
<table>
<thead style={{background:'#777'}}>
<th>Equipe1</th>
<th>Equipe2</th>
</thead>
<tbody>
{matchaffiches.map(m=>{
return <tr style={{width:'100%'}}>
<td>{m.equipe1}</td>
<td>{m.equipe2}</td>
</tr>
})}
</tbody>
</table>
</div>
)
}
