REACT-Display content of my json file but get only the header-CodePudding

I can't display the content of my json file in my table. I get the headers but nothing in cells.

Here is my code:

import Table from './Table'
import Menu from "./menus.json"


export default function Display() {
    const [menu, setMenu] = useState([Menu]);


    const data = useMemo(() => [
        {
            Header: 'Id',
            accessor: menu.id,
        },
        {
            Header: 'Title',
            accessor: menu.title,
        },
        {
            Header: 'Invited',
            accessor: menu.invited.name,
        },
        {
            Header: 'Price',
            accessor: menu.price,
        },
    ], [])
    return (

        <Table data={menu} columns={normalizeData(data.result)}>
    )

}

Extract of my json :

{
    "menus": [
        {
            "id": "Menu1",
            "title": "Creamy pea soup topped with melted cheese and sourdough croutons.",
            "price": 4,
            "invited": [
                {
                    "name": "Jose Luis",
                    "location": "LA"
                },
                {
                    "name": "Smith",
                    "location": "New York"
                },
            ],
            
        },
        ...
    ]
}

Just before the return i tried an Object.keys(data).map((key) => ({id: key,})); but doesn't work.

Thanks for your help !

CodePudding user response：

The JSON data is an object:

{
  "menus": [
    {
      "id": "Menu1",
      "title": "Creamy pea soup topped with melted cheese and sourdough croutons.",
      "price": 4,
      "invited": [
        {
          "name": "Jose Luis",
          "location": "LA"
        },
        {
          "name": "Smith",
          "location": "New York"
        },
      ],    
    },
    ...
  ]
}

...

import JsonData from "./menus.json";

...

const { menus } = JsonData;

The accessor property isn't correct.

CodePudding user response：

import { menus } from "./menus.json";

Maybe you try to do this?

CodePudding user response：

I think it should be Menu.menus or you can destructure it to:

const {menus} = Menu