Карта в карте из массива, в массиве

Question

ReactJS Новичок здесь. В основном у меня есть массив. Тогда другой массив в нем. Пожалуйста, смотрите ниже:

arr = [{
   itema: 'a',
   itemb: ['img/image1.jpg', 'img/image2.jpg']
}, {
   itema: 'b',
   itemb: ['img/image3.jpg', 'img/image4.jpg', 'img/image5.jpg']
}, {
   itema: 'c',
   itemb: ['img/image6.jpg', 'img/image7.jpg']
}
]

Я успешно отобразил приведенный выше массив, например:

arr.map((arr, i) => {
   return(<span>{arr.itema}</span>)
})

Но моя проблема - внутренняя карта. Можно ли отобразить этот массив в пределах данного массива? Заранее спасибо.

Answer 1

Да, конечно, можно показать вложенные массивы в React или любом другом фреймворке.
Например, в вашей render функции

render() {
 return (
 <>
  {
   arr.map((arr, i) =>(
      <> 
       <span>{arr.itema}</span>
       <span>{arr.itemb.map(item => (<span>{item}</span>))}</span>
      </>
    )
  }
 </>
 )
}

Answer 2

Конечно, вы можете.

arr.map((item, i) => {
   return (
     <div>
         <span>{item.itema}</span>
         {
            item.itemb && item.itemb.length > 0 &&
            item.itemb.map(image => (<img src={image} />))
         }
     </div>
    );
})

Это будет отображено, как показано ниже (только для одного элемента в arr)

  <div>
   <span>a</span>
   <img src="img/image1.jpg" />
   <img src="img/image2.jpg" />
  </div>

И я заметил, что вы использовали одно и то же имя элемента arr как родительский массив arr в первой функции карты. Я рекомендую использовать другое имя ключа для правильной идентификации.