повторно использовать компонент реакции в функции карты

Question

У меня есть сомнения, что я делаю это правильно, возвращая компонент в итерации карты.Как я могу улучшить код или есть лучший способ сделать это?(хотя мой код работает)

https://codesandbox.io/s/5yzqy6vyqx

Родительский

function App() {
  return (
    <div className="App">
      {[
        {
          name: "banana",
          count: 3
        },
        {
          name: "apple",
          count: 5
        }
      ].map(({ name, count }) => {
        return <List name={name} count={count} />;
      })}
    </div>
  );
}

Компонент списка

const List = ({ name, count }) => {
  return (
    <li>
      {name}: {count}
    </li>
  );
};

Answer 1

Вам необходимо установить уникальное значение в качестве ключа для компонента List, потому что вы визуализируете List в цикле.Уникальное значение может быть идентификатором для каждого объекта в массиве или индексом из .map, но мы рекомендуем иметь уникальный идентификатор для объекта в данных и использовать его в качестве ключа при выполнении итерации.

Индекс не рекомендуется использовать в качестве ключа, но в худшем случае мы можем.

Также добавьте элемент ul, чтобы li отображался в ul

Ниже код улучшен с добавлением ключа, ul и .map функция без возврата

    function App() {
         return (
              <div className="App">
                <ul>
                 {[
                    {
                       id: 1
                       name: "banana",
                       count: 3
                    },
                    {
                     id:2,
                     name: "apple",
                     count: 5
                    }
                   ].map(({ id, name, count }) => (
                     <List key={id} name={name} count={count} />;
                ))}
              </ul>
            </div>
           );
      }

Answer 2

Упростите вот так.

function App() {
  return (
    <div className="App">
    <ul>
      {[
        {
          name: "banana",
          count: 3
        },
        {
          name: "apple",
          count: 5
        }
      ].map(({ name, count }) => <li>{name}:{count} </li>)}
      </ul>
    </div>
  );
}