Getting 1234 in my first table cell while others are empty instead of having 1 for my first cell...4 for the last one

Question

The return gives me 1234. So, I get 1234 in my first table cell and the other are empty... Instead of having 1 for my first cell, 2 for the second, 3 and 4 for the last cell.

I have this json:

[
  {
    "id": 1,
    "name": "Katleen",
   ...    
  },
...
]

Menu.jsx:

export default function Menu() {

    const [menu, setMenu] = useState([])    
    useEffect(() => {
        axios.get('http://127.0.0.1:1337/core/menu')
            .then(res => {
                console.log(res)
                setMenu(res.data)
            })
            ...
    }, []);

    const data = useMemo(() => [    
        {
            Header: "Id",
            accessor: (row) => menu.map(e => (e.id)),
            id: "idMenu"
        },

    ], [])
    return (        
            <div >
                menu.map(e => (e.id))
            </div>
    )
}

Answer 1

Add the space before the id.

<div>
  {menu.map((e, index) => index === 0 ? e.id : ` ${e.id}`)}
</div>