Objects are not valid as a React child use an array-CodePudding

import React, { useEffect, useState } from 'react';
export default function Orders() {
const [orders, setOrders] = useState([]);
const orderCollectionRef = collection(db, 'Order');
useEffect(() => {
  const getOrders = async () => {
    const data = await getDocs(orderCollectionRef);
    setOrders(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
  };
  getOrders();
}, []);
return (
  <div>
  <table className="table table-striped table-hover">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Order Id</th>
        <th scope="col">Costumer Name</th>
        <th scope="col">Costumer CIN</th>
        <th scope="col">Costumer Phone</th>
        <th scope="col">Adress</th>
        <th scope="col">Date</th>
        <th scope="col">Price</th>
        <th scope="col">Action</th>
      </tr>
    </thead>
    <tbody>
//this is where the prolem appears
      {orders.map((order, key) => {
        return (
          <tr key={key} >
            <td>{order.orderId}</td>
            <td>{order.costumerName}</td>
            <td>{order.costumerCIN}</td>
            <td>{order.costumerPhone}</td>
            <td>{order.adress}</td>
            <td>{order.date}</td>
            <td>{order.price}</td>
            <td><div className="d-grid gap-2 d-md-block">
              <button className="btn btn-success btn-sm" type="button">Update</button>
              <button className="btn btn-danger btn-sm" type="button">Delete</button>
            </div>
            </td>
          </tr>)
      })}
    </tbody>
  </table>}

CodePudding user response：

console orders and check if it is an array or not because the map method only works on an array and errors suggest that orders isnot an array.

CodePudding user response：

Objects are not valid as a React child use an array. React is showing this error because the code is making React to render the object.

For example : Consider the following array of objects books,

const books = [
{
   id: 1,
   title: "The Intelligent Investor",
   img: "https://images-eu.ssl-images-amazon.com/images/I/91 t0Di07FL._AC_UL160_SR160,160_.jpg",
   author: "Benjamin Graham",
},

{
   id: 2,
   title: "Rich Dad Poor Dad",
   img: "https://images-eu.ssl-images-amazon.com/images/I/81bsw6fnUiL._AC_UL160_SR160,160_.jpg",
   author: "Robert T. Kiyosaki",
},
]

Now, let's render the array books into some component.

const Books = () => {
     return <section>{books}</section>
}

Notice these will give us an error:

Objects are not valid as a React child use an array (found object with keys {img, title, author}). If you meant to render a collection of children, use an array instead.

The books is an array, still React shows an error because the elements of an array is object and react will have to render the object in {books}. Hence, to avoid these types of error we need to de-structure the objects properly from the array.

Coming to your case :

<td>{order.orderId}</td>
<td>{order.costumerName}</td>
<td>{order.costumerCIN}</td>
<td>{order.costumerPhone}</td>
<td>{order.adress}</td>
<td>{order.date}</td>
<td>{order.price}</td>

Any of the above property is an object or some object is wrapped inside the property. Double check the orders array.

Hope it helps! Cheers!