Cant render object value - reactjs

Question

I'm trying to render a Table, but I'm getting a render error, I looked up other stack's questions and there was suggested that I should use map for returning object array values. I also used render inside map. My object looks like this:
[
{
amount_left: "100",
category: "vegtable",
food_name: "potatos",
price: "1",
type: "salty"
},
{
amount_left: "100",
category: "cheese",
food_name: "cheese",
price: "0.5",
type: "salty"
},
...
]
My code.
import React, { Component } from 'react';
import { Table } from 'reactstrap';
class Meals extends Component {
getMeals = async () =>{
const api_call = await fetch(`http://127.0.0.1/RFIDSys/rfid_handler.class.php?action=getAllMeals`);
const data = await api_call.json();
console.log(data[0].food_name) // returns potatos
return data.map((item,i) => {
return (<tr><td>{item.food_name}</td></tr>)
})
}
render(){
return (
<div>
<Table>
<tbody>
{this.getMeals()}
</tbody>
</Table>
</div>
);
}
}
export default Meals;
Cant see what's wrong, I'm getting "Objects are not valid as a React child (found: [object Promise]).If you meant to render a collection of children, use an array instead." error.
The error that suggest that use array instead, ain't I using arrays in map function or it's still an object what I'm returning?

Answer 1

Your render function is synchronous function. However, getMeals function is asynchronous function.
Async-await keyword wraps you function into promise, so getMeals function return a promise to your render function, consequently you can't use getMeals in render function.
You can solve your task by using state:
import React, { Component } from "react";
import { Table } from "reactstrap";
class Meals extends Component {
state = { meals: null };
componentDidMount() {
this.loadMeals();
}
loadMeals = async () => {
const api_call = await fetch(
`http://127.0.0.1/RFIDSys/rfid_handler.class.php?action=getAllMeals`
);
const data = await api_call.json();
console.log(data[0].food_name);
this.setState({ meals: data });
};
render() {
if (!this.state.meals) {
return null;
}
return (
<div>
<Table>
<tbody>
{this.state.meals.map((item, i) => (
<tr>
<td>{item.food_name}</td>
</tr>
))}
</tbody>
</Table>
</div>
);
}
}
export default Meals;