reactJS - JSX映射数组以形成元素，但对每个元素进行分组

import React from 'react';

const data = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' },
];

const GroupedElements = () => {
  // 对每个元素进行分组
  const groupedData = data.reduce((groups, item) => {
    const groupKey = item.name.charAt(0);
    if (!groups[groupKey]) {
      groups[groupKey] = [];
    }
    groups[groupKey].push(item);
    return groups;
  }, {});

  // 映射数组并生成React元素
  const elements = Object.keys(groupedData).map((groupKey) => (
    <div key={groupKey}>
      <h2>{groupKey}</h2>
      <ul>
        {groupedData[groupKey].map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  ));

  return <div>{elements}</div>;
};

export default GroupedElements;