I am new to React and I am using Ant Design as a framework. So far I have made good progress on my project, getting the backend up and running and working on the frontend with many components working correcly. Happy with the progress until this point!

Now I am trying to generate a table getting the data from my API. I have managed to retrieve the data using inside my class component using:

render(){       
const workpack = fetch(process.env.REACT_APP_API_URL+'work_package')
              .then((response) => response.json())
              .then((data) => console.log(data));

I have inspected the site and it returns correctly the API data as:

0: {work_package_ID: 1, work_package_name: 'Package1'}
length: 1
[[Prototype]]: Array(0)

My issue comes when I try to allocate the table column headers (keys) or the rows (values).

If I use Object.keys(workpack) or Object.values(workpack) to create new constants extracting the data, I cannot obtain the desired values and I think it is because fetch has put a "0" as a key in front of the array.

In the end, I am looking for a generalized procedure to generate the "dataSource" array and "columns" arrays (as shown in the documentation from Ant) without having to copy manually all the information from my tables.

Any hint or clear reference? I have been researching for a while, but I don't seem to land a good source.

Thanks a lot!