React & JSON: How to .map over nested JSON arrays in nested .maps

Question

Trying to get the sub comments to roll out but I just cant get the maps to work.

I'm not sure if the comments JSON structure is wrong or if my loop is incorrect.

The object will display if i console.log it but it dies on map.

Keeps saying "Error: Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead."

const comments = [
  { name: 'Chelsea Hagon', 
    message: 'You rock at this!', 
    avatarURL: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    replys: [
      {name: 'chris'},
      {name: 'chris'}
    ]
  },
  { name: 'Angela Fisher', message: 'Yes, very good stuff.', avatarURL: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',  imageUrl: 'https://images.unsplash.com/photo-1501031170107-cfd33f0cbdcc?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80'},
  { name: 'Carla Yates', message: 'Great work bro.', avatarURL: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',  imageUrl: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'},
  { name: 'Leslie Johnson', message: 'Cant stop looking at this. dang.', avatarURL: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',  imageUrl: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'},
  { name: 'Francis Watson', message: 'oh man', avatarURL: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',  imageUrl: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'},
  { name: 'Tracey Palmer', message: 'You rock at this!', avatarURL: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',  imageUrl: 'https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'},
  { name: 'Alejandro Davidson', message: 'You rock at this!', avatarURL: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',  imageUrl: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'},
  { name: 'Leslie Alexander', message: 'You rock at this!', avatarURL: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', imageUrl: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'},
  { name: 'Dries Vincent', message: 'You rock at this!', avatarURL: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',  imageUrl: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'},
  { name: 'Courtney Henry', message: 'You rock at this!', avatarURL: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',  imageUrl: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'},
  { name: 'Michael Foster', message: 'You rock at this!', avatarURL: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',  imageUrl: 'https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'},
  { name: 'Lindsey Walton', message: 'You rock at this!', avatarURL: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', imageUrl: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'},
  { name: 'Tom Cook', message: 'You rock at this!', avatarURL: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',  imageUrl: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'},
  { name: 'Whitney Francis', message: 'You rock at this!', avatarURL: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',  imageUrl: 'https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80'},
  { name: 'Leonard Krasner', message: 'You rock at this!', avatarURL: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',  imageUrl: 'https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80'},
  { name: 'Floyd Miles', message: 'You rock at this!', avatarURL: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',  imageUrl: 'https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80'},
]

Pass in my data


 {comments ? renderComments(comments) : null}

But the sub map is not working...


const renderComments = comments => {
    return comments.map((comment, index) => 
      <span key={index}>
        <div className="flex items-start justify-between w-full py-1 space-x-2 group ">
          <button aria-label="Chris Chilcoat's Timeline" role="link" tabindex="0" className="flex-shrink-0 block mt-1 rounded-full hover:bg-black focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-opacity-60">
            <img className="w-8 h-8 bg-gray-300 rounded-full hover:opacity-90" src={comment.avatarURL} alt=""></img>
          </button>
          <div className="flex-1 text-left">
            <div className="bg-gray-100 rounded-xl px-3 py-1.5">
              <div className="text-xs font-semibold">{comment.name}</div>
              <div className="text-sm font-normal text-gray-800">{comment.message}</div>
            </div>
          </div>
          <button className="flex-shrink-0 block p-2 mt-1 text-gray-500 rounded-full opacity-0 group-hover:opacity-100 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-opacity-60">
            <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
          </button>
        </div>
        
        {comment[index].replys.map((reply) => {
          return (
            <div key={reply.name}>{reply.name}</div>
          );
        })}   
        
      </span>
    )
  }

on this line of code {comment[index].replys.map((reply) => { comment is not an array so you can't use the [index]. I would suggest you change it for {comment?.replys.map((reply) => { — Rafael Freitas
– Rafael Freitas, Commented Jul 17, 2021 at 22:32

Aleksandr Smyshliaev · Accepted Answer · 2021-07-17 22:35:06Z

1

Also using name as a key not best idea.

   // {comment[index].replys.map((reply) => {
   {comment?.replys?.map((reply) => {
      return (
        <div key={reply.name}>{reply.name}</div>
      );
    })}

answered Jul 17, 2021 at 22:35

Aleksandr Smyshliaev

4284 silver badges10 bronze badges

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

3 Comments

Chris Chilcoat Over a year ago

Works great. I'll update the name key also. Thanks for your help!

Chris Chilcoat Over a year ago

Also what's the ? do?

Aleksandr Smyshliaev Over a year ago

?. is a optional chaining developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Rafael Freitas · Accepted Answer · 2021-07-17 22:33:38Z

0

You should change this:

       {comment[index].replys.map((reply) => {
          return (
            <div key={reply.name}>{reply.name}</div>
          );
        })}

For this:

    {comment?.replys.map((reply) => {
      return (
        <div key={reply.name}>{reply.name}</div>
      );
    })}

As comment inside the map refers to an object, not an array. So you can't access the index.

answered Jul 17, 2021 at 22:33

Rafael Freitas

2012 silver badges7 bronze badges

Collectives™ on Stack Overflow

React & JSON: How to .map over nested JSON arrays in nested .maps

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related