'Dropdowns and filters not applied with REACT
I'm not able to display my menus (_ids.name) that match my filters from the 2 dropdowns (MyNorm1,...MyNorm6) and (Classification1,...Classification6). For example, when I click on my filters and select for example MyNorm6 and Classifications1 I want to see all the names of my menus that match these filters i.e Pea Soup , Chicken tenders and Samosa for this example.
Here an image to get the idea:
export default function Filters({ onValidation, display }) {
const [filters, setFilters] = useState({});
const [submit, setSubmit] = useState();
const changeHandler = (e) => {
const { name, checked } = e.target;
setFilters((filters) => ({
...filters,
[name]: checked
}));
};
...
const NORMS = [
...
{ label: "MyNorm6", value: "norm6", checked: false }
];
const CLASSIFICATIONS = [
...
{ label: "Classification5", value: "Classification5", checked: false }
];
return (
<div>
//Apply & Reset button not working...
</div>
<div className="text-md font-bold rounded-md p-5 dark-shadow-sm leading-8 text-gray-500 flex flex-wrap gap-x-8 gap-y-4">
Norms: <CustomDropdown options={NORMS} isMulti={true} />
</div>
...
<div className="my-3 h-6 text-xl uppercase font-bold leading-8 text-gray-500">
Matched Menus
</div>
//FILTERS NOT WORKING ...
...
{NORMS.map((name) => (
<td key={name}>
<label>
<input
type="text"
checked={filters[name]}
onChange={changeHandler}
name={name}
className="w-8 h-3"
/>
{name}
</label>
</td>
))}
</td>
</tr>
{data
.filter((item) => {
const filterEntries = Object.entries(filters)
.filter(([, value]) => Boolean(value))
.map(([key]) => key);
if (filterEntries.length) {
if (filters.item) {
return item.norms.some((n) =>
filterEntries.includes(n.norms)
);
}
if (filters.item) {
return item.classification.some((n) =>
filterEntries.includes(n.classification)
);
}
}
return true;
})
.map((item) => (
<tr key={item.id}>
<td>{item.name}</td>
</tr>
))}
</tbody>
</div>
</div>
</div>
);
}
Here the code
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
