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

Question

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)}>
    )

}

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

Thanks for your help !

Answer 1

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.

Column Options

• accessor: String | Function(originalRow, rowIndex) => any
  • Required
  • This string/function is used to build the data model for your column.
  • The data returned by an accessor should be primitive and sortable.
  • If a string is passed, the column's value will be looked up on the original row via that key, eg. If your column's accessor is firstName then its value would be read from row['firstName']. You can also specify deeply nested values with accessors like info.hobbies or even address[0].street
  • If a function is passed, the column's value will be looked up on the original row using this accessor function, eg. If your column's accessor is row => row.firstName, then its value would be determined by passing the row to this function and using the resulting value.
  • Technically speaking, this field isn't required if you have a unique id for a column. This is used for things like expander or row selection columns. Warning: Only omit accessor if you really know what you're doing.

Use stingified accessors

const data = useMemo(
  () => [
    {
      Header: "Id",
      accessor: "id"
    },
    {
      Header: "Title",
      accessor: "title"
    },
    {
      Header: "Invited",
      accessor: "invited[0].name" // because invited is an array
    },
    {
      Header: "Price",
      accessor: "price"
    }
  ],
  []
);

Or use a function

const data = useMemo(
  () => [
    {
      Header: "Id",
      accessor: row => row.id
    },
    {
      Header: "Title",
      accessor: row => row.title
    },
    {
      Header: "Invited",
      accessor: row => row.invited[0].name
    },
    {
      Header: "Price",
      accessor: row => row.price
    }
  ],
  []
);