在React中访问嵌套的JSON数据

import React, { useState } from 'react';

const MyComponent = () => {
  const jsonData = {
    name: 'John',
    age: 30,
    hobbies: ['reading', 'coding', 'gaming'],
    address: {
      street: '123 Main St',
      city: 'New York',
      country: 'USA'
    }
  };

  return (
    <div>
      <h2>{jsonData.name}</h2>
      <p>Age: {jsonData.age}</p>

      <h3>Hobbies:</h3>
      <ul>
        {jsonData.hobbies.map((hobby, index) => (
          <li key={index}>{hobby}</li>
        ))}
      </ul>

      <h3>Address:</h3>
      <p>Street: {jsonData.address.street}</p>
      <p>City: {jsonData.address.city}</p>
      <p>Country: {jsonData.address.country}</p>
    </div>
  );
};

export default MyComponent;