重用map函数中的react组件

Question

I have doubt I'm doing it right when returning a component in a map iteration. How can I improve the code or is there any better way to do it? (although my code is working)

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

Parent

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

List component

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

Answer 1

Simplify like this.

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

Answer 2

You need to set unique value as key to List component because you are rendering List in loop. Unique value can be id per each object in array or index from .map but we are recommended to have unique id per object in data and use that as key when we iterate.

Index is not recommended as key but in worst case we can.

Also add ul element so that li will be rendered under ul

Below code has improved with adding key, ul and .map function without return

    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>
           );
      }