'Menu content display issue
I need some help pls. I created a menu with section and courses; but the section-labels are repeating.
I would like all courses with the same section to be displayed on a single section lable.
Please see code and screenshot.
<Menu
defaultSelectedKeys={[clicked]}
inlineCollapsed={collapsed}
style={{ height: "100vh", overflow: "scroll" }}
mode="inline"
>
{course.lessons.map((lesson, index) => (
<SubMenu
title={lesson.section}>
<ItemGroup
key={index}>
<Item
onClick={() => setClicked(index)}
key={index}
icon={<Avatar>{index + 1}</Avatar>}
>
{lesson.title.substring(0, 30)}
{" "}
{completedLessons.includes(lesson._id) ? (
<CheckCircleFilled
className="float-end text-primary ml-2"
style={{ marginTop: "13px" }}
/>
) : (
<MinusCircleFilled
className="float-end text-danger ml-2"
style={{ marginTop: "13px" }}
/>
)}
</Item>
</ItemGroup>
</SubMenu>
))}
</Menu>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
