Мне нужно использовать входной фильтр в React. У меня есть список действий, и мне нужно отфильтровать их, как фильтры на картинке. Если значки не отмечены, действия с этими типами действий не должны отображаться. Это работает.
Проблема в том, что когда я использую входной фильтр и пишу буквы, он работает. Но когда я удаляю букву за буквой, ничего не меняется.
Я понимаю, что проблема в том, что я записываю результат в состояние. И состояние изменено. Но как его правильно переписать.
const [activities, setActivities] = useState(allActivities);
const [value, setValue] = useState(1);
const [checked, setChecked] = useState<string[]>([]);
const switchType = (event: React.ChangeEvent<HTMLInputElement>)=> {
const currentIndex = checked.indexOf(event.target.value);
const newChecked = [...checked];
if (currentIndex === -1) {
newChecked.push(event.target.value);
} else {
newChecked.splice(currentIndex, 1);
}
//function that shows activities if they are checked or unchecked
setChecked(newChecked);
const res = allActivities.filter(({ type }) => !newChecked.includes(type));
setActivities(res);
};
//shows input filter
const inputSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
const foundItems = activities.filter(
(item) => item.activity.indexOf(event.target.value) > -1
);
setActivities(foundItems);
};
//shows participants filter
const countSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
setValue(Number(event.target.value));
const participantsSearch = allActivities.filter(
(item) => item.participants >= event.target.value
);
setActivities(participantsSearch);
};
Это часть визуализации
<Input
onChange={inputSearch}
startAdornment={
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
}
/>
<Input
onChange={countSearch}
type="number"
value={props.value}
startAdornment={
<InputAdornment
position="start"
className={classes.participantsTextField}
>
<PersonIcon />
</InputAdornment>
}
/>
Я согласен с этим вариантом, но в этом варианте мы фильтруем все действия. И мне нужно отфильтровать те, которые были выбраны после фильтра флажка. Другими словами, все фильтры подключены. Если я выбираю спортивные и социальные мероприятия, входной фильтр должен отображать действия с этим типом, но не все.