How to use nested Map in React component with the given data

Question

I have data coming from API

[
    {
      title: "Lesson 1",
      topics: [
        "Topic 1",
        "Topic 2",
        "Topic 3"
      ]
    },
    {
      title: "Lesson 2",
      topics: [
        "Topic 1",
        "Topic 2",
        "Topic 3"
      ]
    }

]

I want To show Lessons and Relevant Topics in nested Order Like Topic 1 -> Lesson 1 ,2 3 4 I am Doing Like this

<List>
                    {LessonList.map(() => (lesson)(
                        <ListItem button className={classes.LessonTitle} key={lesson.title} >
                            <ListItemIcon ><FiberManualRecordOutlinedIcon /></ListItemIcon>
                            <ListItemText primary={lesson.title} />
                        </ListItem>

                        {
                            lesson.topics.map(() => (t) {
                                return (
                                    <ListItem button className={classes.LessonTopics} key='Django Learning'>
                                        <ListItemIcon ><FiberManualRecordIcon /></ListItemIcon>
                                        <ListItemText primary='Django Learning' />
                                    </ListItem>
                                )
                            }
                            )

                        }
                    ))}
</List>

But its Syntax Error

I don't understand your requirements. If you want to map array items to react elements you can do it like so: array.map((item) => { return <ListItem>{item.title}</ListItem>}) — hendra
– hendra, Commented May 12, 2021 at 13:16

Priyank Kachhela · Accepted Answer · 2021-05-12 13:18:38Z

JSX expression must have only one parents that's why it was showing error

Try something like below:-

      <List>
        {LessonList.map(lesson => (
          <>
            <ListItem button className={classes.LessonTitle} key={lesson.title}>
              <ListItemIcon>
                <FiberManualRecordOutlinedIcon />
              </ListItemIcon>
              <ListItemText primary={lesson.title} />
            </ListItem>
            {lesson.topics.map(topic => {
              return (
                <ListItem
                  button
                  className={classes.LessonTopics}
                  key="Django Learning"
                >
                  <ListItemIcon>
                    <FiberManualRecordIcon />
                  </ListItemIcon>
                  <ListItemText primary={topic} />
                </ListItem>
              );
            })}
          </>
        ))}
      </List>

Wai Ha Lee · Accepted Answer · 2021-05-12 17:56:55Z

1

When you have more than 1 stuff coming out of a {} block in react, you need to wrap them in a div or something, but you can use react fragments like this <> </>

for example your code can be done like this:

<List>
  {LessonList.map((lesson) =>
      <>
        <ListItem button className={classes.LessonTitle} key={lesson.title}>
          <ListItemIcon>
            <FiberManualRecordOutlinedIcon />
          </ListItemIcon>
          <ListItemText primary={lesson.title} />
        </ListItem>

        {lesson.topics.map((t) => (
          <ListItem button className={classes.LessonTopics} key='Django Learning'>
            <ListItemIcon>
              <FiberManualRecordIcon />
            </ListItemIcon>
            <ListItemText primary='Django Learning' />
          </ListItem>
        ))}
      </>
  )}
</List>

also as you see your second map had syntax issue which I fixed that as well.

edited May 12, 2021 at 17:56

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered May 12, 2021 at 13:17

Alixsep

4002 gold badges3 silver badges14 bronze badges

3 Comments

hendra Over a year ago

Can you explain this syntax LessonList.map(() => lesson(...))?

Alixsep Over a year ago

Its prolly a function that has a jsx element as argument.

Waqas Devolper Over a year ago

i think the lesson must be inside the map parameter right? LessonList.map(lesson)=>()

Collectives™ on Stack Overflow

How to use nested Map in React component with the given data

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related