Hi am trying to filter an array with multiple checkbox based on the code here: React How to Filter Data Array using Multiple Checkbox
The example is with one filter I want to implement a three different filter system. They all work out individually or together based on the operators I put in the filter method. How can I make them interact with each other and filter correctly the data . Thank you for your help.
https://codesandbox.io/s/elastic-williams-gubr5?file=/src/App.js
I created a working example of what you are trying to do. Take a look:
import React, { useState } from "react";
import {
Container,
Grid,
Card,
Typography,
FormControl,
Checkbox,
FormGroup,
FormControlLabel,
TextField
} from "@material-ui/core";
const apartmentData = [
{
title: "Unit 1",
rooms: "1",
building: "A",
sqFt: "400"
},
{
title: "Unit 2",
rooms: "1",
building: "A",
sqFt: "500"
},
{
title: "Unit 3",
rooms: "1",
building: "A",
sqFt: "600"
},
{ title: "Unit 4", rooms: "2", building: "A" },
{
title: "Unit 5",
rooms: "2",
building: "A",
sqFt: "400"
},
{
title: "Unit 6",
rooms: "1",
building: "B",
sqFt: "600"
},
{
title: "Unit 7",
rooms: "1",
building: "B",
sqFt: "600"
}
];
const apartment = [{ roomsLabel: "1" }, { roomsLabel: "2" }];
const edifice = [{ buildingLabel: "A" }, { buildingLabel: "B" }];
const SquareFeets = [
{ sqFtLabel: "400" },
{ sqFtLabel: "500" },
{ sqFtLabel: "600" }
];
const FilterMethod01 = () => {
const [rooms, setRooms] = useState([]);
const [building, setBuilding] = useState([]);
const [sqFt, setSqFt] = useState([]);
console.log(rooms, building, sqFt);
const filteredUnits =
rooms.length || building.length || sqFt.length
? apartmentData.filter((apartment) => {
console.log("filtering", apartment);
return (
(!rooms.length || rooms.includes(apartment.rooms)) &&
(!building.length || building.includes(apartment.building)) &&
(!apartment.sqFt || !sqFt.length || sqFt.includes(apartment.sqFt))
);
})
: apartmentData;
return (
<Container>
<TextField value={(rooms, building, sqFt)} fullWidth />
<FormControl>
<FormGroup>
{apartment.map((apartment, i) => (
<FormControlLabel
key={i}
control={
<Checkbox
onChange={(event) =>
setRooms((prev) =>
event.target.checked
? [...prev, apartment.roomsLabel]
: []
)
}
/>
}
label={apartment.roomsLabel}
value={apartment.roomsLabel}
/>
))}
</FormGroup>
</FormControl>
<FormControl>
<FormGroup>
{edifice.map((e, i) => (
<FormControlLabel
key={i}
control={
<Checkbox
onChange={(event) =>
setBuilding((prev) =>
event.target.checked ? [...prev, e.buildingLabel] : []
)
}
/>
}
label={e.buildingLabel}
value={e.buildingLabel}
/>
))}
</FormGroup>
</FormControl>
<FormControl>
<FormGroup>
{SquareFeets.map((s, i) => (
<FormControlLabel
key={i}
control={
<Checkbox
onChange={(event) =>
setSqFt((prev) =>
event.target.checked ? [...prev, s.sqFtLabel] : []
)
}
/>
}
label={s.sqFtLabel}
value={s.sqFtLabel}
/>
))}
</FormGroup>
</FormControl>
<Grid
style={{ paddingTop: "100px" }}
container
direction="row"
justify="flex-start"
alignItems="center"
spacing={30}
>
{filteredUnits.map((apartment, index) => (
<Card
style={{
background: "lightgray",
marginBottom: "2px",
width: "400px",
padding: "20px"
}}
>
<Typography gutterBottom variant="h4">
{apartment.title}
</Typography>
<Typography gutterBottom variant="h6">
rooms: {apartment.rooms}
</Typography>
<Typography gutterBottom variant="h6">
building: {apartment.building}
</Typography>
<Typography gutterBottom variant="h6">
SqFt: {apartment.sqFt}
</Typography>
</Card>
))}
</Grid>
</Container>
);
};
export default FilterMethod01;
