Render object in React js grouped by key

Question

I have a data structure as below:

{
  oldPics: {
    [title: 'dog', url: 'www.dog.com'],
    [title: 'cat', url: 'www.cat.com'],
    [title: 'bird', url: 'www.bird.com'],
  },

  newPics: {
    [title: 'fox', url: 'www.fox.com'],
    [title: 'lion', url: 'www.lion.com'],
  },

  archivedPics: {
    [title: 'eagle', url: 'www.eagle.com'],
    [title: 'fish', url: 'www.fish.com'],
    [title: 'monkey', url: 'www.monkey.com'],
  },
}

I want to display the data like this:

<div>
  <div>
    <h3>old</h3>
    <p>title: dog, url: www.dog.com</p>
    <p>title: cat, url: www.cat.com</p>
    <p>title: bird, url: www.bird.com</p>
  </div>


  <div>
    <h3>new</h3>
    <p>title: fox, url: www.fox.com</p>
    <p>title: lion, url: www.lion.com</p>
  </div>

  <div>
    <h3>archived</h3>
    <p>title: eagle, url: www.eagle.com</p>
    <p>title: fish, url: www.fish.com</p>
    <p>title: monkey, url: www.monkey.com</p>
  </div>
</div>

I have tried in my component to render it as below but it renders empty <div> elements:

  _renderPics(group) {

    const content = []

    const piccies = Object
                    .keys(group)
                    .map(key => content.push(
                        <div key={key}>title: {group[key].title} url: {group[key].url}</div>
                    ));
    return content

  }

Any idea?

it renders empty html elements

Mauro74
– Mauro74

2018-03-12 15:33:56 +00:00
Commented Mar 12, 2018 at 15:33 — Mauro74
– Mauro74, Commented Mar 12, 2018 at 15:33

dfsq · Accepted Answer · 2018-03-12 15:46:25Z

2

Assuming that your data structure is correct in your real case, two nested maps should do the job:

_renderPics(group) {
  return Object
    .keys(group)
    .map((key, index) => (
      <div key={index}>
        <h3>{key.replace('Pics', '')}</h3>
        {group[key].map((pic, i) => (
          <div key={i}>title: {pic.title}, url: {pic.url}</div>
        ))}
      </div>
    ));
}

Demo: https://codesandbox.io/s/l94mml0yj9

answered Mar 12, 2018 at 15:46

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

Comments

Dkhili amine · Accepted Answer · 2018-03-12 16:07:59Z

1

You must correct your data structure from

oldPics: {
 [title: 'dog', url: 'www.dog.com'],
 [title: 'cat', url: 'www.cat.com'],
 [title: 'bird', url: 'www.bird.com'],
}

To

oldPics: [
 {title: 'dog', url: 'www.dog.com'},
 {title: 'cat', url: 'www.cat.com'},
 {title: 'bird', url: 'www.bird.com'},
]

then

{Object.keys(group).map((key, y) =>
  <div key={y}>
    <h3>{key.replace('Pics', '')}</h3>
      {group[key].map((item, y) =>
      <div key={y}>title: {item.title} url: {item.url}</div>
      )}
  </div>
)}

https://codesandbox.io/s/1r3mp5jnj4

edited Mar 12, 2018 at 16:07

answered Mar 12, 2018 at 15:46

Dkhili amine

1695 bronze badges

Collectives™ on Stack Overflow

Render object in React js grouped by key

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related