title: How to create a nested list using React after mapping element from database, and let elements being expansible at the same time?
body: <p>I am trying to achieve something like this:</p>
  <p><a href="https://i.stack.imgur.com/RiRxT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RiRxT.png" alt="enter image description here" /></a></p>
  <p>But I do have few problems:</p>
  <ol>
  <li>Even though I mapped 3 values I get displayed 4 for some reasons and I am not sure why, as shown in the photo below:</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/LBe39.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LBe39.png" alt="enter image description here" /></a></p>
  <ol start="2">
  <li>When I click the first header I get a 3 times the same title as sub-header 4 times and 4 times the same card as shown below:</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/lXzm7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lXzm7.png" alt="enter image description here" /></a></p>
  <p>What I need is having something like:</p>
  <ol>
  <li>Projekt</li>
  <li>-- WBS element</li>
  <li>--- Tilstedeværlsesart</li>
  </ol>
  <hr />
  <h2>THEN THE CARD HERE ONCE</h2>
  <p>So when i expand project i see WBS element, if i expand WBS element i see Tilstedeværlsesart and when i expand Tilstedeværlsesart i see the card, everything nested up. and the same for going back. But i am some difficult to use MUI and this is what i did so far:</p>
  <pre><code>import ListSubheader from '@mui/material/ListSubheader';
  import List from '@mui/material/List';
  import ListItemButton from '@mui/material/ListItemButton';
  import ListItemIcon from '@mui/material/ListItemIcon';
  import ListItemText from '@mui/material/ListItemText';
  import Collapse from '@mui/material/Collapse';
  import ExpandLess from '@mui/icons-material/ExpandLess';
  import ExpandMore from '@mui/icons-material/ExpandMore';
  
  const [openList, setOpenList] = useState(true);
      
        const listHandleClick = () =&gt; {
          setOpenList(!openList);
        };
        const [openListTwo, setOpenListTwo] = useState(true);
      
        const listHandleClickTwo = () =&gt; {
          setOpenListTwo(!openListTwo);
        };
  
  
  
  
      return (
                        &lt;List
                          sx={{
                            width: '100%',
                            maxWidth: 360,
                            bgcolor: 'background.paper',
                          }}
                          component=&quot;nav&quot;
                          aria-labelledby=&quot;nested-list-subheader&quot;
                        &gt;
                          {info.recentCxtNtreeData.map((ctxInfo, index) =&gt; {
                            return (
                              &lt;div&gt;
                                &lt;ListItemButton onClick={listHandleClick}&gt;
                                  {openList ? &lt;ExpandLess /&gt; : &lt;ExpandMore /&gt;}
                                  &lt;ListItemIcon&gt;&lt;/ListItemIcon&gt;
                                  &lt;ListItemText primary={ctxInfo.contextName} /&gt;
                                &lt;/ListItemButton&gt;
      
                                &lt;Collapse
                                  in={openList}
                                  timeout=&quot;auto&quot;
                                  unmountOnExit
                                &gt;
                                  &lt;List component=&quot;div&quot; disablePadding&gt;
                                    &lt;ListItemButton sx={{ pl: 4 }}&gt;
                                      {openListTwo ? (
                                        &lt;ExpandLess /&gt;
                                      ) : (
                                        &lt;ExpandMore /&gt;
                                      )}
                                      &lt;ListItemIcon&gt;&lt;/ListItemIcon&gt;
                                      &lt;ListItemText
                                        primary={ctxInfo.contextName}
                                      /&gt;
                                    &lt;/ListItemButton&gt;
                                    &lt;Collapse
                                      in={openListTwo}
                                      timeout=&quot;auto&quot;
                                      unmountOnExit
                                    &gt;
                                      &lt;ListItemButton sx={{ pl: 6 }}&gt;
                                        {openListTwo ? (
                                          &lt;ExpandLess /&gt;
                                        ) : (
                                          &lt;ExpandMore /&gt;
                                        )}
                                        &lt;ListItemIcon&gt;&lt;/ListItemIcon&gt;
                                        &lt;ListItemText
                                          primary={ctxInfo.contextName}
                                        /&gt;
                                      &lt;/ListItemButton&gt;
                                      {/* UP IS THE CARD ON A LIST */}
                                      &lt;RecentTemplateComponent
                                        key={info.id}
                                        onClick={() =&gt; setSelectedRecent(info)}
                                        selectedRecent={selectedRecent}
                                        setSelectedRecent={setSelectedRecent}
                                        backgroundColor={selected.backgroundColor}
                                        id={info.id}
                                        color={selected.color}
                                        contextName={
                                          info.recentCxtNtreeData[0]
                                            ? info.recentCxtNtreeData[0]
                                                .contextName
                                            : ''
                                        }
                                        treeNodeName={
                                          info.recentCxtNtreeData[0]
                                            ? info.recentCxtNtreeData[0]
                                                .treeNodeName
                                            : ''
                                        }
                                        isClicked={
                                          info.recentCxtNtreeData[0]
                                            ? info.recentCxtNtreeData[0]
                                                .treeNodeName === clickedTreeNode
                                            : false
                                        }
                                        contexts={info.recentCxtNtreeData}
                                        index={index}
                                        selectedContextID={
                                          selected.reportingContexts._id
                                        }
                                        recentContextID={
                                          info.recentCxtNtreeData.contextID
                                        }
                                        selectedQuantityDay={selectedQuantityDay}
                                        setSelectedQuantityDay={
                                          setSelectedQuantityDay
                                        }
                                        selectedDay={selectedDay}
                                        setSelectedDay={setSelectedDay}
                                        selectedDayTwo={selectedDayTwo}
                                        setSelectedDayTwo={setSelectedDayTwo}
                                        timeTypes={timeTypes}
                                        defaultDate={defaultDate}
                                        firsthour={firsthour}
                                        setFirsthour={setFirsthour}
                                        secondhour={secondhour}
                                        setSecondhour={setSecondhour}
                                        firstMinutes={firstMinutes}
                                        setFirstMinutes={setFirstMinutes}
                                        secondMinutes={secondMinutes}
                                        setSecondMinutes={setSecondMinutes}
                                        reportingContexts={reportingContexts}
                                        treeNodes={treeNodes}
                                        comments={comments}
                                        filledIcon={filledIcon}
                                        isFav={savedArrayInfo.find(
                                          (entry) =&gt; entry.id === info.id
                                        )}
                                        addToFavourite={() =&gt;
                                          addToFavorite(info.id, USER_ID)
                                        }
                                        showSaveButton={showSaveButton}
                                        setShowSaveButton={setShowSaveButton}
                                        addToRecent={addToRecent}
                                      /&gt;
                                    &lt;/Collapse&gt;
                                  &lt;/List&gt;
                                &lt;/Collapse&gt;
                              &lt;/div&gt;
                            );
                          })}
                          {/* &lt;NestedList&gt;
                            {info.recentCxtNtreeData.map((ctxInfo, index) =&gt; (
                              &lt;li&gt;
                                &lt;div style={{marginRight: '10px'}}&gt;
                                  &lt;ArrowDownIconList /&gt;
                                &lt;/div&gt;
                                {ctxInfo.contextName} - {ctxInfo.treeNodeName}
                              &lt;/li&gt;
                            ))}
                          &lt;/NestedList&gt; */}
      
                          {/* &lt;RecentTemplateComponent
                            key={info.id}
                            onClick={() =&gt; setSelectedRecent(info)}
                            selectedRecent={selectedRecent}
                            setSelectedRecent={setSelectedRecent}
                            backgroundColor={selected.backgroundColor}
                            id={info.id}
                            color={selected.color}
                            contextName={
                              info.recentCxtNtreeData[0]
                                ? info.recentCxtNtreeData[0].contextName
                                : ''
                            }
                            treeNodeName={
                              info.recentCxtNtreeData[0]
                                ? info.recentCxtNtreeData[0].treeNodeName
                                : ''
                            }
                            isClicked={
                              info.recentCxtNtreeData[0]
                                ? info.recentCxtNtreeData[0].treeNodeName ===
                                  clickedTreeNode
                                : false
                            }
                            contexts={info.recentCxtNtreeData}
                            index={index}
                            selectedContextID={selected.reportingContexts._id}
                            recentContextID={info.recentCxtNtreeData.contextID}
                            selectedQuantityDay={selectedQuantityDay}
                            setSelectedQuantityDay={setSelectedQuantityDay}
                            selectedDay={selectedDay}
                            setSelectedDay={setSelectedDay}
                            selectedDayTwo={selectedDayTwo}
                            setSelectedDayTwo={setSelectedDayTwo}
                            timeTypes={timeTypes}
                            defaultDate={defaultDate}
                            firsthour={firsthour}
                            setFirsthour={setFirsthour}
                            secondhour={secondhour}
                            setSecondhour={setSecondhour}
                            firstMinutes={firstMinutes}
                            setFirstMinutes={setFirstMinutes}
                            secondMinutes={secondMinutes}
                            setSecondMinutes={setSecondMinutes}
                            reportingContexts={reportingContexts}
                            treeNodes={treeNodes}
                            comments={comments}
                            filledIcon={filledIcon}
                            isFav={savedArrayInfo.find(
                              (entry) =&gt; entry.id === info.id
                            )}
                            addToFavourite={() =&gt; addToFavorite(info.id, USER_ID)}
                            showSaveButton={showSaveButton}
                            setShowSaveButton={setShowSaveButton}
                            addToRecent={addToRecent}
                          /&gt; */}
                        &lt;/List&gt;
                      );
  </code></pre>
  <p>I started using also this <a href="https://stackblitz.com/edit/react-vmsbnf?file=demo.js" rel="nofollow noreferrer">https://stackblitz.com/edit/react-vmsbnf?file=demo.js</a> and it made sense until i put it in my code but i did not completely get it</p>