necesito ayuda por favor Creé un menú con sección y cursos; pero las etiquetas de sección se repiten.
Me gustaría que todos los cursos con la misma sección se muestren en una sola etiqueta de sección.
Por favor, vea el código y la captura de pantalla.
<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>Debe agrupar las lecciones por sección, luego debe iterar sobre cada lección en la sección.
Aquí hay una posible solución:
// group lessons by section into an object {sectionName: [lesson1, lesson2]} const lessonsBySection = course.lessons.reduce(function(obj, lesson) { (obj[lesson.section] = obj[lesson.section] || []).push(lesson); return obj; }, {}); // get all the sections (sorted alphabetically) const sections = Object.keys(lessonsBySection).sort(); return ( <Menu ...> {sections.map((section, sectionIndex) => ( <SubMenu key={section} title={section}> <ItemGroup> {lessonsBySection[section].map((lesson, lessonIndex) => ( <Item key={lesson._id} onClick={() => setClicked( courses.lessons.findIndex(l => l._id === lesson._id) )} icon={<Avatar>{lessonIndex + 1}</Avatar>} > ... </Item> ))} </ItemGroup> </SubMenu> ))} </Menu> )