Objects are not valid as a React child (PrimeReact)

Question

I am having a array of data which is having multiple objects. I want to print the values inside the table using PrimeReact Table.

But when I am passing the data inside value field of DataTable I am getting error Objects are not valid as a React child (found: object with keys {_id, name, description}). If you meant to render a collection of children, use an array instead.

data: [
{
_id: "64f97626355af5fd78ba4faf",
name: "Nokia",
description: "Nokia Phone",
category: {
_id: "64f6a2550dcef5420be2ab99",
name: "Gadgets",
description: "Tech Device"
},
location: null,
createdAt: "2023-09-07T07:05:10.344Z",
updatedAt: "2023-09-07T07:05:10.344Z",
__v: 0
},
{
_id: "64f95cca486947807bce5d97",
name: "iPhone 5",
description: "Mobile from Apple",
category: {
_id: "64f6a2550dcef5420be2ab99",
name: "Gadgets",
description: "Tech Device"
},
location: {
_id: "64f976e5bc67d13278051da0",
name: "Garage"
},
createdAt: "2023-09-07T05:16:58.304Z",
updatedAt: "2023-09-07T07:09:06.382Z",
__v: 0
}
]

Assets.js

import React, { useState, useEffect } from "react";
import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";

const Assets = ({ assets }) => {
  const columns = [
    // { field: "code", header: "Code" },
    { field: "name", header: "Name" },
    { field: "category", header: "Category" },
    // { field: "quantity", header: "Quantity" },
  ];

  return (
    <div>
      <DataTable
        emptyMessage='No assets found'
        value={assets}
        tableStyle={{ minWidth: "50rem" }}
      >
        {columns.map((col) => (
          <Column
            key={col.field}
            field={col.field}
            header={col.header}
          ></Column>
        ))}
      </DataTable>
    </div>
  );
};

export default Assets;

Home.js

import { useEffect, useState } from "react";
import axios from "axios";
import { TabView, TabPanel } from "primereact/tabview";

import Assets from "./Assets";

const Home = () => {
  const [assets, setAssets] = useState([]);
  const fetchAssets = async () => {
    try {
      const response = await axios.get("/api/assets");
      setAssets(response.data.data);
    } catch (error) {
      console.log(error);
    }
  };
  useEffect(() => {
    fetchAssets();
  }, []);
  return (
    <div className='card'>
      <TabView>
        <TabPanel header='Assets'>
          <Assets assets={assets} />
        </TabPanel>
        <TabPanel header='Header II'>
          <p className='m-0'>
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
            quae ab illo inventore veritatis et quasi architecto beatae vitae
            dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
            aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
            eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci
            velit, sed quia non numquam eius modi.
          </p>
        </TabPanel>
        <TabPanel header='Header III'>
          <p className='m-0'>
            At vero eos et accusamus et iusto odio dignissimos ducimus qui
            blanditiis praesentium voluptatum deleniti atque corrupti quos
            dolores et quas molestias excepturi sint occaecati cupiditate non
            provident, similique sunt in culpa qui officia deserunt mollitia
            animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis
            est et expedita distinctio. Nam libero tempore, cum soluta nobis est
            eligendi optio cumque nihil impedit quo minus.
          </p>
        </TabPanel>
      </TabView>
    </div>
  );
};

export default Home;

App.js

import "./App.css";
import {
  BrowserRouter,
  Routes,
  Route,

} from "react-router-dom";

import Home from "./components/Home";

function App() {
  return (
    <>
      <BrowserRouter>  
        <Routes>
          <Route path='/' element={<Home />} />
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
//theme
import "primereact/resources/themes/lara-light-blue/theme.css";
// import "primereact/resources/themes/tailwind-light/theme.css";
//core
import "primereact/resources/primereact.min.css";
// prime icons
import "primeicons/primeicons.css";

import "/node_modules/primeflex/primeflex.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Answer 1

it looks like you are trying to display the "Category" in your column definitions. but "Category" is an object, not something React knows how to display. try changing your column definitions to

{ field: "name", header: "Name" },
{ field: "category.name", header: "Category" },