0

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:

enter image description here

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>
    );
    })
  });
Dio
  • 245
  • 3
  • 15

1 Answers1

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.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • 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 (

    {v.title}

    {v.imgArray.map((j, i)=>{ return
    {j}
    })}
    ); });`     – Dio Aug 10 '21 at 14:36
  • @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. – T.J. Crowder Aug 10 '21 at 14:44