Objects are not Valid as a React Child (found: Object with Keys {price, item}). If you Meant to render a Collection of Children, use an array Instead

Question

I have a page (hall) where orders with the customer’s name, table number and chosen items, are sent to firebase and I need to pick up these orders and show on another page(Kitchen).

Part of the hall where it shows item and price:

      <div className={css(styles.menu)}>
        {menu.map((el, index) => <MenuButton onClick={()=>setOrder(order.concat({item:el[0], price:el[1]}))} el={el} key={index}/>)}
      </div>

The Card component:

const CardKitchen = (props) => {
  return (
    <section>
      <p>Cliente: {props.customer}</p>
      Mesa: {props.table}
      <div>
        {props.clientOrder}
      </div>
      <p>Status: {props.status}</p>
      <p>{props.time}</p>
      <div>
        <Button title= 'Pedido Pronto'/>
      </div>
    </section>
  );
}

The Kitchen archive:

const Kitchen = () => {
  const [customer, setCustomer] = useState([]);

  useEffect(() => {
    const order = [];
    firebase
    .firestore()
    .collection('orders')
    .get()
    .then(snapshot => {
      snapshot.forEach(doc => {
        order.push({
          id: doc.id,
          ...doc.data()
        })
      })
      setCustomer(order)
    })
  }, []);

  const updateStatus = doc => {
    firebase
    .firestore()
    .collection('orders')
    .doc(doc.id)
    .update({
      status: 'Pronto'
    })
    setCustomer(customer.filter(item => item.id !== doc.id))
  };

  return (
    <main className={css(styles.main)}>
      <Nav/>
      <section className={css(styles.title)}>Cozinha
        {customer.map((doc, index) =>
          doc.status === 'Preparando' ? (
            <div key={index}>
              <CardKitchen
                customer={doc.customer}
                table={doc.table}
                clientOrder={doc.order}
              />
              <Button onClick={() => updateStatus(doc)} children={'Pedido pronto'}/>
            </div>
          ) : null
        )}
      </section>
    </main>
  );
}

The mistake:

Answer 1

From what I understand in the Komponent CardKitchen you try to render {props.clientOrder} but it is not a simple element, probably an Object, so it cannot render.

Take a test: exchange {props.clientOrder} for {JSON.stringfy(props.clientOrder)} and see what it renders, if it’s an Object, you need to render each key separately.

Based on the error maybe if you change {props.clientOrder} for {props.clientOrder?.item + ' ' + props.clientOrder?.price} already render certain.