В ReactJS, как я могу наилучшим образом организовать свой код при итерации по неглубоким структурам данных

Question

Я использую React, и у меня следующая структура данных:

[
  {
    key: 'test'
    data: [
      {
        id: 1,
        name: 'test name',
        desc: 'aaaaaaaaa'
      },
      {
       id: 2,
       name: 'test name2',
       desc: 'aaaaaaaaa'
      },
      {
        id: 3,
        name: 'test name3',
        desc: 'aaaaaaaaa'
      }
    ]
  },
  {
    key: 'test2'
    data: [
      {
        id: 5,
        name: 'test name5',
        desc: 'aaaaaaaaa'
      },
      {
       id: 5,
       name: 'test name2',
       desc: 'aaaaaaaaa'
      },
      {
        id: 6,
        name: 'test name6',
        desc: 'aaaaaaaaa'
      }
    ]
  }
]

Я ищу лучший способ извлечения данных из такой структуры.Дело в том, что это должен быть один ul список с li элементами внутри.

У меня есть такая структура для этого:

<div className='wrapper'}>
  {tabInfo.map(({key, data}) => {
    return (
    <div className='tab-list' key={key}>                  
      <h4>{key}</h4>                  
      <ul>
        {data.map(({id, name, desc}) => {
          return (
            <li key={id}>
              <span className='name'>
                {name}
              </span>
              <span className="desc">{desc}</span>
            </li>
          )
        })}
      </ul>
    </div>
    )
  })}
</div>

Какой лучший способ полученияданные в таком случае?Я думаю map внутри map не очень хорошая идея.

Answer 1

Я верю, что это сделает это, хотя я не проверял это, чтобы быть уверенным.Вы можете переместить это в отдельный компонент, который затем можно использовать как часть карты:

const ListItem = ({ id, name, desc }) => (
    <li key={id}>
        <span className='name'>
            {name}
        </span>
        <span className="desc">
            {desc}
        </span>
    </li>
);

<div className='wrapper'}>
    {tabInfo.map(({key, data}) => {
        return (
            <div className='tab-list' key={key}>
                <h4>{key}</h4>
                <ul>
                {data.map(dataItem => <ListItem {...dataItem} />)}
                </ul>
            </div>
        )
    })}
</div>

Возможно, я что-то здесь упустил, поэтому, если возникнут какие-либо проблемы, я буду рад узнать о них.м, так что я могу это исправить