Js. Map inside map

Question

In console I see key. But in browser I don’t see key, only element.title. Want to see in the browser:

key 1
title 1
title 2

key 2
title 3
title 4

{Object.entries(bob).map(([key, value]) => {
        return (
          console.log("key", key),
          (<Typography>{key}</Typography>),
          value.map((element) => (
            <Typography key={element.id}>{element.title}</Typography>
          ))
        )
      })}

If you want to see it in the browser then display it (just as you are displaying the title)? — k.tten
– k.tten, Commented Aug 22, 2022 at 16:15
OP needs to add the respective tag for React. This is not valid Javascript by itself. — Fallenreaper
– Fallenreaper, Commented Aug 22, 2022 at 17:38

Devorein · Accepted Answer · 2022-08-22 16:22:50Z

1

I'm assuming bob looks something like this

const bob = {
  1: [{title: 1}, {title: 2}],
  2: [{title: 3}, {title: 4}]
}

You can try out the following snippet

{Object.entries(bob).map(([key, value]) => {
  console.log("key", key);
  return (
    <>
      <Typography>{key}</Typography>
      {value.map((element) => (
        <Typography key={element.id}>{element.title}</Typography>
      ))}
    </>
  )
})}

Notice the <></> surrounding the key and the value, its called React Fragments. Since you can't return more than one react node, you need to either surround the return with a valid HTML element/React component or use a fragment

answered Aug 22, 2022 at 16:22

Devorein

1,3792 gold badges19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Js. Map inside map

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related