feat: ajoute un filtre par nom
parent
65f2a848b3
commit
b7b3dc1f54
|
@ -40,15 +40,19 @@ function FiltreDepartement(props: { onChange: (event: React.ChangeEvent<HTMLSele
|
|||
export const ListeResistants = () => {
|
||||
const { resistants } = useLoaderData() as { resistants: Resistant[] }
|
||||
const [departement, setDepartement] = React.useState<string|null>(null)
|
||||
const [nom, setNom] = React.useState<string|null>(null)
|
||||
|
||||
const filtreDepartements = (event: React.ChangeEvent<HTMLSelectElement>) => setDepartement(event.target.value)
|
||||
const filtreNom = (event: React.ChangeEvent<HTMLInputElement>) => setNom(event.target.value)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div id="listeResistants">
|
||||
<input type="text" name=""/>
|
||||
Nom: <input type="text" name="" onChange={filtreNom}/>
|
||||
|
||||
<FiltreDepartement onChange={filtreDepartements}/>
|
||||
{resistants
|
||||
.filter(r => !nom || r.noms?.toLowerCase().includes(nom.toLowerCase()))
|
||||
.filter(r => !departement || r.departement?.includes(departement))
|
||||
.map((r) => <ResistantRow resistant={r} key={r.noms}/>)}
|
||||
<Outlet/>
|
||||
|
|
Loading…
Reference in New Issue