如何在react中使用嵌套循环

const data = [
  { id: 1, name: 'John', hobbies: ['reading', 'coding'] },
  { id: 2, name: 'Jane', hobbies: ['drawing', 'singing'] },
];

function MyComponent() {
  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>
          <h3>{item.name}</h3>
          {item.hobbies.map((hobby, index) => (
            <p key={index}>{hobby}</p>
          ))}
        </div>
      ))}
    </div>
  );
}

const data = [
  { id: 1, name: 'John', hobbies: ['reading', 'coding'] },
  { id: 2, name: 'Jane', hobbies: ['drawing', 'singing'] },
];

function MyComponent() {
  const elements = [];

  for (let i = 0; i < data.length; i++) {
    const item = data[i];
    const hobbies = [];

    for (let j = 0; j < item.hobbies.length; j++) {
      hobbies.push(<p key={j}>{item.hobbies[j]}</p>);
    }

    elements.push(
      <div key={item.id}>
        <h3>{item.name}</h3>
        {hobbies}
      </div>
    );
  }

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