-1

Tenho uma página(hall) onde pedidos com o nome do cliente,nº da mesa e os itens escolhidos, são enviados para o firebase e preciso pegar esses pedidos e mostrar em uma outra página(kitchen).

Parte do hall onde mostra item e o 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>

O componente Card:

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>
  );
}

O arquivo Kitchen:

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>
  );
}

O erro: erro

1 Resposta 1

0

Pelo que eu entendi no component CardKitchen você tenta renderizar {props.clientOrder} mas ele não é um elemento simples, provavelmente um object, então ele não consegue renderizar.

Faz um teste: troca {props.clientOrder} por {JSON.stringfy(props.clientOrder)} e vê o que ele renderiza, se for um object, você precisa renderizar cada key separada.

Com base no erro talvez se você trocar {props.clientOrder} por {props.clientOrder?.item + ' ' + props.clientOrder?.price} já renderize certo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .