Need help for map over multiple nested arrays

Question

After reading and trying everything I could, I decided to ask you for help! I just can't handle it...

I have blog posts that looks like this:

const posts = [
{
  section: 'one',
  title: [ 'third', 'fourth' ],
  description: [ 'third', 'fourth' ],
  slug: [ '/third', '/fourth' ]
},
{
  section: 'three',
  title: [ 'second' ],
  description: [ 'second' ],
  slug: [ '/second' ]
},
{
  section: 'two',
  title: [ 'first', 'fifth' ],
  description: [ 'first', 'fifth' ],
  slug: [ '/first', '/fifth' ]
}

]

The goal is to render them in a react component most likely and look like this:

<div>
    <h2>one</h2>
    <div>
      <h3>third</h3>
      <p>third</p>
      <a href="#">/third</a>
    </div>
    <div>
      <h3>fourth</h3>
      <p>fourth</p>
      <a href="#">/fourth</a>
    </div>
  </div>

Just proper render of posts inside corresponding sections. They will be more. This is just an example :)

The best I've come up with (and it doesn't work for me) is this:

{posts.map(x =>
    <div key={x.section}>
      <h2 key={x.section}>{x.section}</h2>
      <div>
        <h3>{x.title}</h3>
        <p>{x.description}</p>
        <a href={x.slug}>{x.slug}</a>          
      </div>
    </div>
   )}

Thank you in advance !!!

what if title contains one element? description two and slug three? — gmoniava
– gmoniava, Commented Jul 31, 2022 at 16:43

user19642323 · Accepted Answer · 2022-07-31 16:50:03Z

1

You can nest maps like so:

{posts.map(x =>
    <div key={x.section}>
      <h2>{x.section}</h2>
      {
        x.title.map((title, idx) => 
          <div key={idx}>
            <h3>{title}</h3>
            <p>{x.description[idx]}</p>
            <a href={x.slug[idx]}>{x.slug[idx]}</a>          
          </div>
      }
    </div>
)}

This only works if we can make the assumption that x.title, .section, and .description have the same dimension.

edited Jul 31, 2022 at 16:50

answered Jul 31, 2022 at 16:44

user19642323

3881 silver badge13 bronze badges

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

1 Comment

I. Petrov Over a year ago

That's how it works. The most interesting part is that I tried almost the same thing, but when I typed {x.title.map(...)} it gave me an error "map is not a function ..." (or something like that). I have no idea why. Thanks a lot to ALL for the solutions provided !!!

Felix G · Accepted Answer · 2022-07-31 16:45:56Z

const posts = [
  {
    section: 'one',
    title: [ 'third', 'fourth' ],
    description: [ 'third', 'fourth' ],
    slug: [ '/third', '/fourth' ]
  },
  {
    section: 'three',
    title: [ 'second' ],
    description: [ 'second' ],
    slug: [ '/second' ]
  },
  {
    section: 'two',
    title: [ 'first', 'fifth' ],
    description: [ 'first', 'fifth' ],
    slug: [ '/first', '/fifth' ]
  }
]

class App extends React.Component {
  render() {
    return (
      <div>
        {posts.map((post, index) => {
          return (
            <div>
              <h2>{post.section}</h2>
              {post.title.map((title, index) => {
                return (
                  <div>
                    <h3>{title}</h3>
                    <p>{post.description[index]}</p>
                    <a href={post.slug[index]}>{post.slug[index]}</a>
                  </div>
                )
              })}
            </div>
          )
        })}
      </div>
    )
  }
}

Konrad · Accepted Answer · 2022-07-31 16:50:03Z

0

Assuming that the array has the same length and order

{posts.map(x =>
  <div key={x.section}>
    <h2 key={x.section}>{x.section}</h2>
    {x.title.map((_, i) => (
      <div>
        <h3>{x.title[i]}</h3>
        <p>{x.description[i]}</p>
        <a href={x.slug[i]}>{x.slug[i]}</a>          
      </div>
    ))}
  </div>
)}

edited Jul 31, 2022 at 16:50

answered Jul 31, 2022 at 16:43

Konrad

24.9k5 gold badges35 silver badges78 bronze badges

1 Comment

Konrad Over a year ago

@user19642323 true, fixed

MBD · Accepted Answer · 2022-07-31 16:57:12Z

Try this:

export default function App() {
  const posts = [
    {
      section: "one",
      title: ["third", "fourth"],
      description: ["third", "fourth"],
      slug: ["/third", "/fourth"]
    },
    {
      section: "three",
      title: ["second"],
      description: ["second"],
      slug: ["/second"]
    },
    {
      section: "two",
      title: ["first", "fifth"],
      description: ["first", "fifth"],
      slug: ["/first", "/fifth"]
    }
  ];

  return (
      <div>
        {posts.map((post) => {
          return (
            <>
              <h2>{post.section}</h2>
              {post.title.map((item, index) => {
                return (
                  <div>
                    <h3>{item}</h3>
                    <p>{post.description[index]}</p>
                    <a href="#">{post.slug[index]}</a>
                  </div>
                );
              })}
            </>
          );
        })}
      </div>
  );
}

Basically, this maps over each post item and then for each post, maps over title array and adds the corresponding title, description and slug.

Note: This assumes that the length of title, description and slug lists will be equal.

Collectives™ on Stack Overflow

Need help for map over multiple nested arrays

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related