How to access a nested child object in Table.Column's prop property?

[sesto-dev]

Hey everybody, Sorry for the amateur question. The data I receive from an API has nested objects:

0: { name: "Item 01", stats: { average_price: "13.20" } }

I can pass the name prop easily but how can I drill to average_price ? I expected stats.average_price to work but it does not.

Thanks in advance.

[harshcut]

You could use the map function to create a new array, then pass the new array to the data prop.

const fetchData = [
  { name: "Item 01", stats: { average_price: "13.20" } },
  { name: "Item 02", stats: { average_price: "17.50" } },
];

const newData = fetchData.map((item) => ({
  name: item.name,
  average_price: item.stats.average_price,
}));

[sesto-dev]

Thank you for answering. The response object has hundreds of nested items and is due to change so I used flat to completely flatten the response object.