Как сопоставить обратный вызов карты?

Question

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

  const labelList = [
    {
      id: 1,
      tipo: 'Type 1',
      itens:
      [{
        id: 1,
        nameItem: 'Item 1'
      },
      {
        id: 2,
        nameItem: 'item 2',
      },
      {
        id: 3,
        nameItem: 'item 3',
      }],
    },
    {
      id: 2,
      tipo: 'Type 2',
      itens:
      [{
        id: 1,
        nameItem: 'Item 1'
      },
      {
        id: 2,
        nameItem: 'item 2',
      },
      {
        id: 3,
        nameItem: 'item 3',
      }],
    },
    {
      id: 3,
      tipo: 'Type 3',
      itens:
      [{
        id: 1,
        nameItem: 'Item 1'
      },
      {
        id: 2,
        nameItem: 'item 2',
      },
      {
        id: 3,
        nameItem: 'item 3',
      }],
    },
    {
      id: 4,
      tipo: 'Type 4',
      itens:
      [{
        id: 1,
        nameItem: 'Item 1'
      },
      {
        id: 2,
        nameItem: 'item 2',
      },
      {
        id: 3,
        nameItem: 'item 3',
      }],
    },
  ];

Итак, я пытаюсь отобразить эти данные следующим образом:

Тип1
Элемент 1, Элемент 2, Элемент 3

Тип 2
Элемент 1, Элемент 2, Элемент 3

Тип 3
Элемент 1, Элемент 2, Элемент 3

Тип 4
Элемент 1, Элемент 2, Элемент 3

Это мой код:

{labelList.map(element => {
  return(            
      <p>{element.tipo}</p>

      {element.map(item => {
        return(
          <CheckboxField
            key={item.id}
            label={item.nameItem}                
          />
        )
      })}
  )})}

Я использую React, но это проблема с Javascript!

Я пытаюсь запустить карту (для рендеринга itens) с обратным вызовом element из labelList.map().Мой код не работает, но я считаю, что логика выглядит так.

Кто-то может мне помочь?

Answer 1

Будьте осторожны, вы можете перебирать элемент.itens, а не элемент, поэтому это правильный код:

{labelList.map(element => {
return(            
  <p>{element.tipo}</p>

  {element.itens.map(item => {
    return(
      <CheckboxField
        key={item.id}
        label={item.nameItem}                
      />
    )
  })}
)})}

Answer 2

Вы должны отобразить ключ itens вместо только элемента.

{labelList.map(element => {
  return(            
      <p>{element.tipo}</p>

      {element.itens.map(item => {
        return(
          <CheckboxField
            key={item.id}
            label={item.nameItem}                
          />
        )
      })}
  )})}