Hi I have a question about multiple filters in react. I have a search bar and checkbox filters and each on their own works great, but if I for example use two filters, only one works. I need them to work together. Does anyone have any idea how to do this?
This is my team.js:
const [genre, setGenre] = useState([]);
const [filteredGenre, setFilteredGenre] = useState([]);
const handleChange = e => {
if (e.target.checked) {
setGenre([...genre, e.target.value]);
return e;
} else {
setGenre(genre.filter(id => id !== e.target.value));
return e;
}
};
useEffect(() => {
if (genre.length === 0) {
setFilteredGenre(players);
} else {
setFilteredGenre(
players.filter(position =>
genre.some(category => [position.position].flat().includes(category))
)
);
}
}, [genre]);
const [value, setValue] = useState('');
const handleSearch = (e) => {
setValue(e.target.value)
}
const filteredEvent = players.filter(events => {
return events.name.toLowerCase().includes(value.toLowerCase());
});
return (
<>
<SectionContent columns={2}>
<Left>
<Filter
handleChange={handleSearch}
handlePositionChange={handleChange}
/>
</Left>
<Right>
<Grid>
{filteredGenre.map(info => (
<Cards
key={info.id}
img={info.imgUrl}
alt={info.imgAlt}
numberInfo={info.number}
name={info.name}
position={info.position}
age={info.age}
nationality={info.nationality}
value={info.value}
/>
))}
</Grid>
</Right>
</SectionContent>
</>
);
};
Aucun commentaire:
Enregistrer un commentaire