Блог

Я очень новичок в кодировании и работаю с пользовательским интерфейсом материалов и ReactJS. Я создал компонент пользовательского списка, который выглядит следующим образом:

             <ListItem
                button
                selected={selectedIndex === 5}
                onClick={(event) => handleListItemClick(event, 5)}
            >
                <ListItemIcon>
                    <div>
                        <img src={SackDollar} style={{width:"22px", height:"22px"}}/>
                    </div>
                </ListItemIcon>
                <ListItemText 
                    disableTypography
                    primary={<Typography className={classes.ItemText}> Refer amp; Earn </Typography>}
                    secondary={<Typography className={classes.ItemTextSub}> Send a code to earn</Typography>}
                />
            </ListItem>
 

Я импортировал этот компонент в свой текущий каталог и хочу отображать различные выходные данные в зависимости от того, какой элемент в списке выбран. Есть ли способ, которым я могу использовать условие для проверки номера выбранного индекса и вывода вывода на его основе? Спасибо 🙂

ИЗМЕНИТЬ: Вот полный список:

 <div className={classes.root}>
        <Typography className={classes.heading} style={{paddingTop:"40px",paddingBottom:"20px", paddingLeft:"18px"}}>
            Settings
        </Typography>
        <Divider/>
        <List component="nav" aria-label="main mailbox folders">
            <ListItem
                button
                selected={selectedIndex === 0}
                onClick={(event) => handleListItemClick(event, 0)}
            >
                <ListItemIcon>
                    <div>
                        <img src={User} style={{width:"20px", height:"20px"}}/>
                    </div>
                </ListItemIcon>
                <ListItemText 
                    disableTypography
                    primary={<Typography className={classes.ItemText}> Refer amp; Earn </Typography>}
                    secondary={<Typography className={classes.ItemTextSub}> Send a code to earn</Typography>}
                />
            </ListItem>
            <Divider/>
            <ListItem
                button
                selected={selectedIndex === 2}
                onClick={(event) => handleListItemClick(event, 2)}
            >
                <ListItemIcon>
                    <div>
                        <img src={Asterisk} style={{width:"20px", height:"20px"}}/>
                    </div>
                </ListItemIcon>
                <ListItemText 
                    disableTypography
                    primary={<Typography className={classes.ItemText}> Preferences </Typography>}
                    secondary={<Typography className={classes.ItemTextSub}> Customize your dashboard</Typography>}
                />
            </ListItem>
        </List>
 

Ниже приведен мой другой файл, в котором я импортировал список и назвал его «Самодельный».

 <div className="screen">
        <div style={{paddingLeft: "240px"}}>
        <Grid
            fluid
            container
        >
            <Grid item xs={4}>
                <MakeshiftDrawer open={isOpen}/>
            </Grid>
            <Grid item xs={8}>
                <Typography>
                    Generate different displays here based on selected list item
                </Typography>
            </Grid>
        </Grid>
       </div>
     </div>