ReactJS中嵌套数组对象的映射值

const data = [
  {
    id: 1,
    name: 'John',
    age: 25,
    hobbies: ['reading', 'coding', 'gaming']
  },
  {
    id: 2,
    name: 'Jane',
    age: 30,
    hobbies: ['painting', 'cooking', 'hiking']
  }
];

const MyComponent = () => {
  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>
          <h2>{item.name}</h2>
          <p>Age: {item.age}</p>
          <ul>
            {item.hobbies.map((hobby, index) => (
              <li key={index}>{hobby}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
};