M
M
MRS 0102022-02-10 08:41:52
React
MRS 010, 2022-02-10 08:41:52

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 question

Ask a Question

731 491 924 answers to any question