Cant render object value

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?

What does your console.log(data[0].food_name) return?

Thomas Darvik
– Thomas Darvik

2018-05-12 11:16:59 +00:00
Commented May 12, 2018 at 11:16 — Thomas Darvik
– Thomas Darvik, Commented May 12, 2018 at 11:16
it returns "potatos"

Godhaze
– Godhaze

2018-05-12 11:25:25 +00:00
Commented May 12, 2018 at 11:25 — Godhaze
– Godhaze, Commented May 12, 2018 at 11:25

Nik · Accepted Answer · 2018-05-12 11:26:49Z

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;

Collectives™ on Stack Overflow

Cant render object value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related