Answer the question
In order to leave comments, you need to log in
How to display filtered list from json on click on select?
There is data (which differs only in "type") in the json file. And there is a "select" component where the choice is between "Standard", "Comfort", "Business". How to display a filtered list?
const Selects = () => {
return (
<Box>
<Grid container item xs={3} sx={{mb: '45px'}}>
<Grid item xs={12}>
<InputLabel sx={{mb: '15px'}}>
ТИП РЕМОНТА
</InputLabel>
</Grid>
<Grid item xs={12}>
<Select
fullWidth
sx={{borderRadius: 0, p: '15px 10px'}}
// id="type"
// onChange={change}
// value={state.value}
>
<Link to='/standard'>
<MenuItem value={Standard}>
Smart Standard
</MenuItem>
</Link>
<Link to='/comfort'>
<MenuItem value={Comfort}>
Smart Comfort
</MenuItem>
</Link>
<Link to='/business'>
<MenuItem value={Business}>
Smart Business
</MenuItem>
</Link>
</Select>
</Grid>
</Grid>
<Outlet />
</Box>
);
};
const Lists = () => {
const goods = getGoods();
// const typeGoods = goods.filter(e => e.p);
// const typeGoods = goods.map((type, index) => ())
return (
<Box>
<Grid container item xs={3}>
<Grid item xs={12} sx={{mb: '20px'}}>
<Typography
sx={{fontSize: '20px'}}
>
Найдено {} объекта:
</Typography>
</Grid>
<Grid item xs={12}>
<List>
{goods.map(good => (
<ListItem
style={({ isActive }) => {
return {
color: isActive ? '#fff' : '#000',
backgroundColor: isActive ? '#000' : '#d3d3d3',
marginBottom: '13px',
padding: '20px',
};
}}
// key={good.type}
type={good.type}
component={NavLink} to={`/${good.type}/${good.id}`}
>
{good.name.toUpperCase()}
</ListItem>
))}
</List>
</Grid>
</Grid>
<Outlet />
</Box>
);
};
{
id: 14,
name: 'ЖК Alanda',
city: 'Нур-Султан',
street: 'ул.Тауелсиздик, 33',
type: 'Business',
img: '../assets/images/40_img.jpeg',
// img40: '../assets/images/40_img.jpeg',
// img41: '../assets/images/41_img.jpeg',
// img42: '../assets/images/42_img.jpeg',
description: 'Делали ремонт не по нашему проекту, а реализовывали чужой проект. Это был длительный ремонт. Высота потолков 3 метра. По проекту делали высокие двери скрытого монтажа, их высота примерно 2.8 метра. Использовали декоративный кирпич, декоративные штукатурки. На полу паркет. Душевую делали из мозаики.',
},
{
id: 15,
name: 'ЖК Millennium Park',
city: 'Нур-Султан',
street: 'ул.23-15б, 11/3',
type: 'Comfort',
img: '../assets/images/43_img.jpeg',
// img43: '../assets/images/43_img.jpeg',
// img44: '../assets/images/44_img.jpeg',
// img45: '../assets/images/45_img.jpeg',
description: 'Делали ремонт не по нашему проекту, а реализовывали чужой проект. Это был длительный ремонт. Высота потолков 3 метра. По проекту делали высокие двери скрытого монтажа, их высота примерно 2.8 метра. Использовали декоративный кирпич, декоративные штукатурки. На полу паркет. Душевую делали из мозаики.',
},
];
// export function getGoods() {
// return goods;
// }
export function getGoods(type) {
return goods.filter(
good => good.type === 'Standard' || 'Comfort' || 'Business'
);
}
export function getGood(id) {
return goods.find(
good => good.id === id
);
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question