如何为JSON文件中的每一项呈现react组件？

import React, { Component } from 'react';

class JSONComponent extends Component {
  state = {
    jsonData: [] // 存储JSON数据的数组
  };

  componentDidMount() {
    // 使用fetch API获取JSON数据
    fetch('data.json')
      .then(response => response.json())
      .then(data => this.setState({ jsonData: data }));
  }

  render() {
    const { jsonData } = this.state;

    return (
      <div>
        {jsonData.map(item => (
          <MyComponent key={item.id} data={item} />
        ))}
      </div>
    );
  }
}

class MyComponent extends Component {
  render() {
    const { data } = this.props;

    return (
      <div>
        <h2>{data.title}</h2>
        <p>{data.description}</p>
        {/* 根据JSON数据的结构，设置其他组件内容 */}
      </div>
    );
  }
}

export default JSONComponent;