I am using React + Typescript. I would like to ask you for help in filtering. I have two filters
hide accounts with low value
hide empty account
Low value set as props by user <"thresholdLowValue" and User can define this threshold as for example number 3. And filter Hide empty account <0. Filtering after checking the checkbox works, but there is one case when the hide empty account filter overwrites the Hide accounts with low value filter.
After the combination checked = true: Hide accounts wit low value && hide empty account = only hide empty account works.
const [preparedItems, setPreparedItems] = useState(items);
const [checkboxState, setCheckboxState] = React.useState({
lowValue: false,
emptyValue: false
});
const filterChange = (value): void => {
if (value.lowValue) {
setPreparedItems(
items.filter(item => item.balance >= (thresholdLowValue || 0))
);
} else {
if (value.emptyValue) {
setPreparedItems(items.filter(item => item.balance > 0));
} else {
setPreparedItems(items);
}
}
};
const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
event.stopPropagation();
filterChange({[event.target.name]: event.target.checked})
setCheckboxState({
...checkboxState,
[event.target.name]: event.target.checked
})
};
<FormGroup>
<FormControlLabel
control={(
<Checkbox
checked={checkboxState.lowValue}
onChange={handleChange}
name="lowValue"
color="primary"
/>
)}
label="Hide accounts with low value"
/>
<FormControlLabel
control={(
<Checkbox
checked={checkboxState.emptyValue}
disableRipple
onChange={handleChange}
name="emptyValue"
color="primary"
/>
)}
label="Hide empty account"
/>
</FormGroup>
Could you help me with this behaviour. Maybe you have a better solution?
Aucun commentaire:
Enregistrer un commentaire