I tried many things to filter on click but I fail I just wanted to filter the onClick function and it is two select first price second is one is the category. When I put filter in handleClick function it return empty array please give me a solution or logic
What I have tried:
```
```
react
```
import users from "../local-JSON/houseapi.json"
const Homecomponent = () => {
const [value, onChange] = useState(new Date());
const [user, updateUser] = useState(users)
const [selectedOption, setSelectedOption] = useState(null)
const [anchorEl, setAnchorEl] = useState(null);
const [AnyTypePrice, setAnyTypePrice] = useState()
const [AnyTypeProperty, setAnyTypeProperty] = useState()
console.log(AnyTypeProperty)
const [category, setCategory] = useState()
const [firstValue, setFirstValue] = useState()
const [secondValue, setSecondValue] = useState()
console.log(AnyTypePrice)
console.log(secondValue)
```
filter in function
```
const handleSearchManual=()=>{
const filter = user.filter(
(item) =>
( item.price >= firstValue && item.price <= secondValue) && ( item.category === category)
);
console.log(filter)
updateUser(filter)
}
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleSelectPriceChange = (price) => {
switch (price) {
case "Any_Type":
setAnyTypePrice('Any_Type')
break;
case "500-2500":
setFirstValue(500)
setSecondValue(2500)
break;
case "2500-5000":
setFirstValue(2500)
setSecondValue(5000)
break;
default:
setAnyTypePrice(null)
break;
}
}
const handleClose = () => {
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const id = open ? 'simple-popover' : undefined;
```
JSX
```
return (
<Container maxWidth="100%" style={{ backgroundColor: "#E2E2EA", height: "100%" }}>
<Box sx={{ width: '100%' }} >
<Stack container
direction="column"
justifyContent="space-around"
alignItems="center" spacing={5}>
<Grid container
direction="row"
justifyContent="space-around"
alignItems="center">
<h1>Search properties to rent</h1>
<FormControl sx={{ m: 1, minWidth: 180 }} size='small' >
<InputLabel style={{ color: "black" }} id="demo-select-small">Search Option</InputLabel>
<Select style={{ backgroundColor: "white" }} label="Resources" size="small" onChange={(e) => setSelectedOption(e.target.value)} >
<MenuItem value={2} >Search with Search Bar</MenuItem>
<MenuItem value={null}>Search with Manually</MenuItem>
</Select>
</FormControl>
</Grid>
{selectedOption === null && (
<div>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
width: 'fit-content',
border: (theme) => `1px solid ${theme.palette.divider}`,
borderRadius: 1,
bgcolor: 'background.paper',
color: 'text.secondary',
'& svg': {
m: 1.5,
},
'& hr': {
mx: 5,
},
textAlign: 'center',
alignContent: 'center'
}}
>
<div>
<Typography variant="body2" color="text.secondary">Location</Typography>
<h3 style={{ marginLeft: "10px" }}>New york</h3>
</div>
<Divider orientation="vertical" flexItem />
<div>
<Typography variant="body2" color="text.secondary">When</Typography>
<Stack container
direction="row"
justifyContent="space-around"
alignItems="center" >
<h3>Select Move-In Date</h3>
<Button aria-describedby={id} onClick={handleClick} size='small' ><CalendarMonthIcon /></Button>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
>
<div style={{ width: 300 }}>
<Calendar onChange={onChange} value={value} />
</div>
</Popover>
</Stack>
</div>
<Divider orientation="vertical" flexItem />
<Stack container
direction="row"
justifyContent="space-around"
alignItems="center" >
<div>
<Typography variant="body2" color="text.secondary" sx={{ pb: 2 }}>Price</Typography>
<form>
<select onChange={(e) => handleSelectPriceChange(e.target.value)} style={{ border: 'none', outlined: "none", fontSize: "20px", with: "200px", backgroundColor: "white", marginBottom: "16px", fontWeight: "bolder" }}>
<option value={'Any_Type'}>Any Type</option>
<option value={"500-2500"}>$500-$2500</option>
<option value={"2500-5000"}>$2500-$5000</option>
</select>
</form>
</div>
</Stack>
<Divider orientation="vertical" flexItem />
<Stack container
direction="row"
justifyContent="space-around"
alignItems="center" >
<div>
<Typography variant="body2" color="text.secondary" sx={{ pb: 2 }}>Property type</Typography>
<form>
<select onChange={(e) => setCategory(e.target.value)} style={{ border: 'none', outlined: "none", fontSize: "20px", with: "200px", backgroundColor: "white", marginBottom: "16px", fontWeight: "bolder" }}>
<option value={'Any_Type'}>Any Type</option>
<option value={'House'}>Houses</option>
<option value={'Apartment'}>Apartments</option>
</select>
</form>
</div>
</Stack>
<Divider orientation="vertical" flexItem />
<Button onClick={()=>handleSearchManual()} variant='contained' sx={{ mr: 5 }} >Search</Button>
</Box>
</div>
)}
{selectedOption === 2 && (
<div>
<FormControl fullWidth sx={{ m: 1, width: "500px", bgcolor: 'white' }} variant="outlined">
<OutlinedInput
id="OutlinedInput-adornment-amount"
placeholder='New York, 1001...'
/>
</FormControl>
<Button variant='contained' sx={{ mt: 2, ml: 2 }}>Search</Button>
</div>
)}
<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
{user.map((item, index) => (
<Grid xs={2} sm={4} md={4} key={index}>
<Card sx={{ maxWidth: 345, borderRadius: "5%" }} style={{ margin: "50px" }} >
<CardMedia
component="img"
alt="No Image"
height="140"
image={item.image}
/>
<CardContent>
<Stack
container
direction="row"
justifyContent="space-between"
alignItems="center"
>
<Typography color="primary" gutterBottom variant="h5" component="div">
${item.price}
</Typography>
<FavoriteBorderOutlinedIcon />
</Stack>
<Typography gutterBottom variant="h5" component="div">
{item.title}
</Typography>
<Typography variant="body2" color="text.secondary">
{item.address}
</Typography>
</CardContent>
<CardActions>
<Button size="small">
<BedroomChildOutlinedIcon />{item.bed}
</Button>
<Button size="small">
<BathtubOutlinedIcon />{item.bathroom}
</Button>
<Button size="small">
<StraightenIcon />
{item.size}
</Button>
</CardActions>
</Card>
</Grid>
))}
</Grid>
</Stack>
</Box>
</Container>
);
}
export default Homecomponent;
Submit an article or tip