在ReactJs中分组和显示值

const data = [
  { id: 1, name: 'Apple', category: 'fruit' },
  { id: 2, name: 'Banana', category: 'fruit' },
  { id: 3, name: 'Carrot', category: 'vegetable' },
  { id: 4, name: 'Orange', category: 'fruit' },
  { id: 5, name: 'Broccoli', category: 'vegetable' }
];

const groupedData = data.reduce((result, item) => {
  const category = item.category;
  if (!result[category]) {
    result[category] = [];
  }
  result[category].push(item);
  return result;
}, {});

console.log(groupedData);

const GroupedDataComponent = ({ groupedData }) => {
  return (
    <div>
      {Object.keys(groupedData).map(category => (
        <div key={category}>
          <h2>{category}</h2>
          <ul>
            {groupedData[category].map(item => (
              <li key={item.id}>{item.name}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
};

// 使用组件并传入分组后的数据
const App = () => {
  return <GroupedDataComponent groupedData={groupedData} />;
};