Для цикла внутри карты React.js

Question

Описание

Итак, у меня есть такой массив:

const CategoriesList = [
    {nameNL:'bakkerij', 
     nameFR:'boulangerie', 
     nameEN:'bakery', 
     nameDE:'Bäckerei', 
     categories: [
        {nameNL:'bakkerij', nameFR:'boulangerie', nameEN:'bakery', nameDE:'Bäckerei'},
        {nameNL:'bier', nameFR:'la bière', nameEN:'beer', nameDE:'Bier'},
    ]},
]

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

Вопрос

Как зациклить объекты внутри функции карты.

Что у меня есть

 {CategoriesList.map(({nameNL, nameFR, nameEN, nameDE, categories}, index) => {
    return (
        <div key={index} className='flxRow'>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameNL}</div>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameFR}</div>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameEN}</div>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameDE}</div>
            {
                for (i = 0; i < categories.length; i++) { 
                    console.log(categories[i].name)
                }
            }
        </div>  
)})}

Answer 1

const CategoriesList = [
{nameNL:'bakkerij', 
 nameFR:'boulangerie', 
 nameEN:'bakery', 
 nameDE:'Bäckerei', 
 categories: [
    {nameNL:'bakkerij', nameFR:'boulangerie', nameEN:'bakery', nameDE:'Bäckerei'},
    {nameNL:'bier', nameFR:'la bière', nameEN:'beer', nameDE:'Bier'},
]},

]

const result = CategoriesList.map(item => {
 return item.categories.map(item2 => {
   return (
    console.log(item2.nameNL));
  })
 });

Рабочая:

https://codepen.io/anildelhi/pen/YdPmvL?editors=1111

Answer 2

Вы можете использовать другое map:

 {CategoriesList.map(({nameNL, nameFR, nameEN, nameDE, categories}, index) => {
    return (
        <div key={index} className='flxRow'>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameNL}</div>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameFR}</div>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameEN}</div>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameDE}</div>
            {
                categories.map(category => ...)
            }
        </div>  
)})}

Я также рекомендую прочитать о клавишах