CODEWITHSUNDEEP
javascriptreactjsarraylistmaterial-ui
Waqas Devolper
Waqas Devolper

Reputation: 323

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

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

Upvotes: 0

Views: 3243

Answers (2)

Alixsep
Alixsep

Reputation: 400

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.

Upvotes: 1

Priyank Kachhela
Priyank Kachhela

Reputation: 2635

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>

Upvotes: 2

Related Questions