How to get the third icon to change in material ui? - reactjs

Question

I was trying to import some icons and for my website but the Material ui documents shows some code which does not allow me to change the existing icon.
import * as React from 'react';
import Box from '#mui/material/Box';
import Drawer from '#mui/material/Drawer';
import CssBaseline from '#mui/material/CssBaseline';
import AppBar from '#mui/material/AppBar';
import Toolbar from '#mui/material/Toolbar';
import List from '#mui/material/List';
import Typography from '#mui/material/Typography';
// import Divider from '#mui/material/Divider';
import ListItem from '#mui/material/ListItem';
import ListItemButton from '#mui/material/ListItemButton';
import ListItemIcon from '#mui/material/ListItemIcon';
import ListItemText from '#mui/material/ListItemText';
import GroupIcon from '#mui/icons-material/Group';
// import InboxIcon from '#mui/icons-material/MoveToInbox';
import MailIcon from '#mui/icons-material/Mail';
import LibraryMusicIcon from '#mui/icons-material/LibraryMusic';
const drawerWidth = 240;
export default function PermanentDrawerLeft() {
return (
<Box sx={{ display: 'flex' }}>
<CssBaseline />
<AppBar
position="fixed"
sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}
>
</AppBar>
<Drawer
sx={{
width: drawerWidth,
flexShrink: 0,
'& .MuiDrawer-paper': {
width: drawerWidth,
boxSizing: 'border-box',
},
}}
variant="permanent"
anchor="left"
>
<Toolbar />
<Toolbar>
<Typography variant="h5" noWrap component="div">
Available Groups
</Typography>
</Toolbar>
<List>
{['First Room', 'Second Room', 'Third Room'].map((text, index) => (
<ListItem key={text} disablePadding>
<ListItemButton>
<ListItemIcon>
{index === 2 ? <GroupIcon /> : <LibraryMusicIcon /> : <MailIcon /> }
</ListItemIcon>
<ListItemText primary={text} />
</ListItemButton>
</ListItem>
))}
</List>
<Toolbar>
<Typography variant="h5" noWrap component="div">
Members
</Typography>
</Toolbar>
</Drawer>
<Box
component="main"
sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
>
<Toolbar />
</Box>
</Box>
);
}
I tried to change the icon for the first element which i was able to do but as soon i try change the icon for the third element the output shows error.
I was expecting that the third icon changes

Answer 1

Upadte
If there need to be 3 different icons for 3 items, it could be:
{index === 0 ? <GroupIcon /> : index === 1 ? <LibraryMusicIcon /> : <MailIcon />}
Or it could be:
{[<GroupIcon />, <LibraryMusicIcon />, <MailIcon />][index]}
Both the above ways should be equivalent.
Original
index starts from 0, so the third item will have an index of 2.
If you prefer every third icon change, it could be:
{(index + 1) % 3 === 0 ? <LibraryMusicIcon /> : <MailIcon />}
But if there is just 3 items to be mapped, it could be as simple as:
{index === 2 ? <LibraryMusicIcon /> : <MailIcon />}
Hope this will help.