How correctly output a multidimensional array in React.js?

Question

When I try to output an array, I only get the title and the last img value in the imgArray. What could be the problem and how to fix it?

This is what is displayed in the end:

const items = [
  {
     "title": "1",
      "imgArray": [{
        "img": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, commodi.",
        "img": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, nesciunt."
      }]
    },
    {
      "title": "2",
      "imgArray": [{
        "img": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, commodi.",
        "img": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, nesciunt."
      }]
    },
    {
      "title": "3",
      "imgArray": [{
        "img": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, commodi.",
        "img": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, nesciunt.",
        "img": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, architecto?"
      }]
    },
]


  const scrollBar = items.map((v, i) => {
    v.imgArray.map((j, i)=>{
      return (
      <div key={i} className={classes.item}>
        <h2>{v.title}</h2>
        <div>{j.img}</div>
      </div>
    );
    })
  });

T.J. Crowder · Accepted Answer · 2021-08-10 14:21:18Z

4

Your imgArray properties aren't arrays. This creates an object with one property:

imgArray: {
  img: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, commodi.',
  img: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, nesciunt.',
  img: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, architecto?'
}

Only the last img: xyz there wins, imgArray.img ends up being the last value.

To create an array, you use [], not {}, and you don't use property names:

imgArray: [
  'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, commodi.',
  'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, nesciunt.',
  'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, architecto?'
]

In your map callback on imgArray, j will be the string, so you'll need to make changes there too. For instance:

const scrollBar = items.map((item) => {
    // You need `return` for `scollBar` to have a return value
    return item.imgArray.map((img) => {
        return (
            <div key={img} className={classes.item}>
            <h2>{item.title}</h2>
            <div>{img}</div>
            </div>
        );
    });
});

See also this question's answers for why I added a return in there.

edited Aug 10, 2021 at 14:21

answered Aug 10, 2021 at 14:12

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

Dio Over a year ago

Thanks a lot! The only thing if I do as you have, I only return 1 img value from the array. And this is how it displays each value:

const scrollBar = items.map((v, i) => {       return (       <div key={i} className={classes.item}>         <h2>{v.title}</h2>         {v.imgArray.map((j, i)=>{           return <div>{j}</div>         })}       </div>     );   });

T.J. Crowder Over a year ago

@Dio - The code in the answer definitely displays multiple images (all with the same title, since there's only one title per entry in your outer array). Glad you got it working as you like though.

Collectives™ on Stack Overflow

How correctly output a multidimensional array in React.js?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related