material-uiのListItemButtonのselectedの値をクリック時に変更したい

前提

material-uiを使用してサイトを作っています
TypeScriptでサイトを作っています。

実現したいこと

・ボタンを押したときに<ListItemButton>のselectedプロパティが押したところだけtrueになるようにしたいです。

全体のソースコード

Navigator.tsx
1import * as React from 'react'
2import Divider from '@mui/material/Divider'
3import Drawer, { DrawerProps } from '@mui/material/Drawer'
4import List from '@mui/material/List'
5import Box from '@mui/material/Box'
6import ListItem from '@mui/material/ListItem'
7import ListItemButton from '@mui/material/ListItemButton'
8import ListItemIcon from '@mui/material/ListItemIcon'
9import ListItemText from '@mui/material/ListItemText'
10import HomeIcon from '@mui/icons-material/Home'
11import PeopleIcon from '@mui/icons-material/People'
12import DnsRoundedIcon from '@mui/icons-material/DnsRounded'
13import PermMediaOutlinedIcon from '@mui/icons-material/PhotoSizeSelectActual'
14import PublicIcon from '@mui/icons-material/Public'
15import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernet'
16import SettingsInputComponentIcon from '@mui/icons-material/SettingsInputComponent'
17import TimerIcon from '@mui/icons-material/Timer'
18import SettingsIcon from '@mui/icons-material/Settings'
19import PhonelinkSetupIcon from '@mui/icons-material/PhonelinkSetup'
20import { useState } from 'react'
21
22const categories = [
23  {
24    id: 'Build',
25    children: [
26      {
27        id: 'Authentication',
28        icon: <PeopleIcon />,
29        active: false,
30      },
31      { id: 'Database', icon: <DnsRoundedIcon />, active: false },
32      { id: 'Storage', active: false, icon: <PermMediaOutlinedIcon /> },
33      { id: 'Hosting', active: false, icon: <PublicIcon /> },
34      { id: 'Functions', active: false, icon: <SettingsEthernetIcon /> },
35      {
36        id: 'Machine learning',
37        icon: <SettingsInputComponentIcon />,
38      },
39    ],
40  },
41  {
42    id: 'Quality',
43    children: [
44      { id: 'Analytics', active: false, icon: <SettingsIcon /> },
45      { id: 'Performance', active: false, icon: <TimerIcon /> },
46      { id: 'Test Lab', active: false, icon: <PhonelinkSetupIcon /> },
47    ],
48  },
49]
50
51const item = {
52  py: '2px',
53  px: 3,
54  color: 'rgba(255, 255, 255, 0.7)',
55  '&:hover, &:focus': {
56    bgcolor: 'rgba(255, 255, 255, 0.08)',
57  },
58}
59
60const itemCategory = {
61  boxShadow: '0 -1px 0 rgb(255,255,255,0.1) inset',
62  py: 1.5,
63  px: 3,
64}
65
66export default function Navigator(props: DrawerProps) {
67  const { ...other } = props
68  const [activState, setActiveState] = useState(false)
69  console.log(activState)
70
71  return (
72    <Drawer variant="permanent" {...other}>
73      <List disablePadding>
74        <ListItem
75          sx={{ ...item, ...itemCategory, fontSize: 22, color: '#fff' }}
76        >
77          Paperbase
78        </ListItem>
79        <ListItem sx={{ ...item, ...itemCategory }}>
80          <ListItemIcon>
81            <HomeIcon />
82          </ListItemIcon>
83          <ListItemText>Project Overview</ListItemText>
84        </ListItem>
85        {categories.map(({ id, children }) => (
86          <Box key={id} sx={{ bgcolor: '#101F33' }}>
87            <ListItem sx={{ py: 2, px: 3 }}>
88              <ListItemText sx={{ color: '#fff' }}>{id}</ListItemText>
89            </ListItem>
90            {children.map(({ id: childId, icon, active }) => (
91              <ListItem disablePadding key={childId}>
92                <ListItemButton
93                  onClick={() => {
94                    console.log('a')
95                    setActiveState(true)
96                    active = true
97                  }}
98                  selected={active}
99                  sx={item}
100                >
101                  <ListItemIcon>{icon}</ListItemIcon>
102                  <ListItemText>{childId}</ListItemText>
103                </ListItemButton>
104              </ListItem>
105            ))}
106            <Divider sx={{ mt: 2 }} />
107          </Box>
108        ))}
109      </List>
110    </Drawer>
111  )
112}
113
114

該当のソースコード

Navigator.tsx
1{categories.map(({ id, children }) => (
2          <Box key={id} sx={{ bgcolor: '#101F33' }}>
3            <ListItem sx={{ py: 2, px: 3 }}>
4              <ListItemText sx={{ color: '#fff' }}>{id}</ListItemText>
5            </ListItem>
6            {children.map(({ id: childId, icon, active }) => (
7              <ListItem disablePadding key={childId}>
8                <ListItemButton
9                  onClick={() => {
10                    console.log('a')
11                    setActiveState(true)
12                    active = true
13                  }}
14                  selected={active}
15                  sx={item}
16                >
17                  <ListItemIcon>{icon}</ListItemIcon>
18                  <ListItemText>{childId}</ListItemText>
19                </ListItemButton>
20              </ListItem>
21            ))}

試したこと

###これだとクリック時もselectedに入る真偽値はfalseのままでした。
selected = {active}

### すべてのListItemButtonの真偽値がtrueになりました。
selected = {activState}

もし足りない情報がございましたらお伝えください。
宜しくお願いいたします

行動規範の内容に同意します

回答1件

自己解決

array.mapの形を崩したらいけました

Navigator.tsx
1import * as React from 'react'
2import Divider from '@mui/material/Divider'
3import Drawer, { DrawerProps } from '@mui/material/Drawer'
4import List from '@mui/material/List'
5import Box from '@mui/material/Box'
6import ListItem from '@mui/material/ListItem'
7import ListItemButton from '@mui/material/ListItemButton'
8import ListItemIcon from '@mui/material/ListItemIcon'
9import ListItemText from '@mui/material/ListItemText'
10import HomeIcon from '@mui/icons-material/Home'
11import PeopleIcon from '@mui/icons-material/People'
12import DnsRoundedIcon from '@mui/icons-material/DnsRounded'
13import PermMediaOutlinedIcon from '@mui/icons-material/PhotoSizeSelectActual'
14import PublicIcon from '@mui/icons-material/Public'
15import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernet'
16import SettingsInputComponentIcon from '@mui/icons-material/SettingsInputComponent'
17import TimerIcon from '@mui/icons-material/Timer'
18import SettingsIcon from '@mui/icons-material/Settings'
19import PhonelinkSetupIcon from '@mui/icons-material/PhonelinkSetup'
20import { useState } from 'react'
21
22const categories = [
23  {
24    id: 'Build',
25    children: [
26      {
27        id: 'Authentication',
28        icon: <PeopleIcon />,
29        active: false,
30      },
31      { id: 'Database', icon: <DnsRoundedIcon />, active: false },
32      { id: 'Storage', active: false, icon: <PermMediaOutlinedIcon /> },
33      { id: 'Hosting', active: false, icon: <PublicIcon /> },
34      { id: 'Functions', active: false, icon: <SettingsEthernetIcon /> },
35      {
36        id: 'Machine learning',
37        icon: <SettingsInputComponentIcon />,
38      },
39    ],
40  },
41  {
42    id: 'Quality',
43    children: [
44      { id: 'Analytics', active: false, icon: <SettingsIcon /> },
45      { id: 'Performance', active: false, icon: <TimerIcon /> },
46      { id: 'Test Lab', active: false, icon: <PhonelinkSetupIcon /> },
47    ],
48  },
49]
50
51const item = {
52  py: '2px',
53  px: 3,
54  color: 'rgba(255, 255, 255, 0.7)',
55  '&:hover, &:focus': {
56    bgcolor: 'rgba(255, 255, 255, 0.08)',
57  },
58}
59
60const itemCategory = {
61  boxShadow: '0 -1px 0 rgb(255,255,255,0.1) inset',
62  py: 1.5,
63  px: 3,
64}
65
66export default function Navigator(props: DrawerProps) {
67  const { ...other } = props
68  const [selectedIndex, setSelectedIndex] = React.useState(1)
69
70  const handleListItemClick = (
71    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
72    index: number
73  ) => {
74    setSelectedIndex(index)
75  }
76
77  return (
78    <Drawer variant="permanent" {...other}>
79      <List disablePadding>
80        <ListItem
81          sx={{ ...item, ...itemCategory, fontSize: 22, color: '#fff' }}
82        >
83          Paperbase
84        </ListItem>
85        <ListItem sx={{ ...item, ...itemCategory }}>
86          <ListItemIcon>
87            <HomeIcon />
88          </ListItemIcon>
89          <ListItemText>Project Overview</ListItemText>
90        </ListItem>
91
92        <Box key={'Build'} sx={{ bgcolor: '#101F33' }}>
93          <ListItem sx={{ py: 2, px: 3 }}>
94            <ListItemText sx={{ color: '#fff' }}>{'Build'}</ListItemText>
95          </ListItem>
96
97          <ListItem disablePadding key={'Authentication'}>
98            <ListItemButton
99              selected={selectedIndex === 1}
100              onClick={(event) => handleListItemClick(event, 1)}
101              sx={item}
102            >
103              <ListItemIcon>{<PeopleIcon />}</ListItemIcon>
104              <ListItemText>{'Authentication'}</ListItemText>
105            </ListItemButton>
106          </ListItem>
107
108          <ListItem disablePadding key={'Database'}>
109            <ListItemButton
110              selected={selectedIndex === 2}
111              onClick={(event) => handleListItemClick(event, 2)}
112              sx={item}
113            >
114              <ListItemIcon>{<DnsRoundedIcon />}</ListItemIcon>
115              <ListItemText>{'Database'}</ListItemText>
116            </ListItemButton>
117          </ListItem>
118
119          <ListItem disablePadding key={'Storage'}>
120            <ListItemButton
121              selected={selectedIndex === 3}
122              onClick={(event) => handleListItemClick(event, 3)}
123              sx={item}
124            >
125              <ListItemIcon>{<PermMediaOutlinedIcon />}</ListItemIcon>
126              <ListItemText>{'Storage'}</ListItemText>
127            </ListItemButton>
128          </ListItem>
129
130          <ListItem disablePadding key={'Hosting'}>
131            <ListItemButton
132              selected={selectedIndex === 4}
133              onClick={(event) => handleListItemClick(event, 4)}
134              sx={item}
135            >
136              <ListItemIcon>{<PublicIcon />}</ListItemIcon>
137              <ListItemText>{'Hosting'}</ListItemText>
138            </ListItemButton>
139          </ListItem>
140
141          <ListItem disablePadding key={'Functions'}>
142            <ListItemButton
143              selected={selectedIndex === 5}
144              onClick={(event) => handleListItemClick(event, 5)}
145              sx={item}
146            >
147              <ListItemIcon>{<SettingsEthernetIcon />}</ListItemIcon>
148              <ListItemText>{'Functions'}</ListItemText>
149            </ListItemButton>
150          </ListItem>
151
152          <ListItem disablePadding key={'Machine learning'}>
153            <ListItemButton
154              selected={selectedIndex === 6}
155              onClick={(event) => handleListItemClick(event, 6)}
156              sx={item}
157            >
158              <ListItemIcon>{<SettingsInputComponentIcon />}</ListItemIcon>
159              <ListItemText>{'Machine learning'}</ListItemText>
160            </ListItemButton>
161          </ListItem>
162
163          <Divider sx={{ mt: 2 }} />
164        </Box>
165        <Box key={'Quality'} sx={{ bgcolor: '#101F33' }}>
166          <ListItem sx={{ py: 2, px: 3 }}>
167            <ListItemText sx={{ color: '#fff' }}>{'Quality'}</ListItemText>
168          </ListItem>
169          <ListItem disablePadding key={'Analytics'}>
170            <ListItemButton
171              selected={selectedIndex === 7}
172              onClick={(event) => handleListItemClick(event, 7)}
173              sx={item}
174            >
175              <ListItemIcon>{<SettingsIcon />}</ListItemIcon>
176              <ListItemText>{'設定'}</ListItemText>
177            </ListItemButton>
178          </ListItem>
179          <ListItem disablePadding key={'Performance'}>
180            <ListItemButton
181              selected={selectedIndex === 8}
182              onClick={(event) => handleListItemClick(event, 8)}
183              sx={item}
184            >
185              <ListItemIcon>{<TimerIcon />}</ListItemIcon>
186              <ListItemText>{'勤怠時間'}</ListItemText>
187            </ListItemButton>
188          </ListItem>
189          <ListItem disablePadding key={'Test Lab'}>
190            <ListItemButton
191              selected={selectedIndex === 9}
192              onClick={(event) => handleListItemClick(event, 9)}
193              sx={item}
194            >
195              <ListItemIcon>{<PhonelinkSetupIcon />}</ListItemIcon>
196              <ListItemText>{'Test Lab'}</ListItemText>
197            </ListItemButton>
198          </ListItem>
199        </Box>
200      </List>
201    </Drawer>
202  )
203}