طالب علم3

السلام عليكم ، انا اتعلم حاليا ReactJs و احتاج مساعدتكم ، اريد ان اعرض البيانات من ملف Persons.json في جدول مكون من ثلاثة اعمدة ( treeview table,collapse) كما هو موضح في الصورة المرفقة. كيف يمكنني استعراض البيانات من ملف Persons.json في الجدول كما في الصورة ارجو المساعدة كود ملف App.js import React, { Component } from "react"; import Persons from "./Persons"; export class App extends Component { render() { return ( <> <div> <table border="2"> <tbody> <tr> <th>Column1</th> <th>Column2</th> <th>Column3</th> </tr> {Persons.persons.map((item, i) => ( <tr key={(i = "1")}> <td>{item.name}</td> <td>{item.name}</td> <td>{item.name}</td> </tr> ))} </tbody> </table> </div> </> ); } } export default App; و هنا ملف بياناتات Persons.json { "persons": [ { "id": "1", "name": "Anna", "children": [ { "id": "1.1", "name": "Mary", "children": [ { "id": "1.1.1", "name": "Tim" }, { "id": "1.1.2", "name": "Bob" } ] }, { "id": "1.2", "name": "Max", "children": [ { "id": "1.2.1", "name": "Mark" } ] } ] }, { "id": "2", "name": "Jack", "children": [ { "id": "2.1", "name": "Tia" }, { "id": "2.2", "name": "Carla" } ] }, { "id": "3", "name": "David", "children": [ { "id": "3.1", "name": "Sara" }, { "id": "3.2", "name": "Ralf" } ] } ] }