I'm new to NextJs, trying to fetch objects from JSON and render them inside a custom component created inside a function as a react component. And the JSON file is correctly imported in the main js file, what I mean is, when I try to render the JSON object list inside the main file with .map() method, it returns an object instead of an array. I don't find what mistake I've done. May you look at the code bellow
Here is my JSON file
[ { "id":1, "avatar":"https://randomuser.me/api/portraits/men/1.jpg", "nom":"Rafaly Georges", "mail":"[email protected]", "dept":"Logistique", "status":"active" }, { "id":2, "avatar":"https://randomuser.me/api/portraits/men/1.jpg", "nom":"Rajean Paul", "mail":"[email protected]", "dept":"Infrastructure", "status":"active" }, { "id":3, "avatar":"https://randomuser.me/api/portraits/women/1.jpg", "nom":"Belmondique", "mail":"[email protected]", "dept":"Logistique", "status":"active" } ]
And my react code
import React from 'react'; import { BiTrashAlt,BiEdit } from 'react-icons/bi'; import data from '../../database/data.json'; export default function UserTableList() { return ( <table className="min-w-full table-auto mx-auto "> <thead> <tr className="bg-gray-800"> <th className="px-16 py-2"> <span className="text-gray-200">Nom</span> </th> <th className="px-16 py-2"> <span className="text-gray-200">Email</span> </th> <th className="px-16 py-2"> <span className="text-gray-200">Departement/Titre</span> </th> <th className="px-16 py-2"> <span className="text-gray-200">Activité</span> </th> <th className="px-16 py-2"> <span className="text-gray-200">Action</span> </th> </tr> </thead> <tbody className="bg-gray-200"> /*THE PROBLEM IS HERE, I want to map data from a *data* object in a JSON file but an error comes out data is the JSON object that should be mapped as an array here */ { data.map(data=>{ return( <Tr key={data.id} id={data.id} nom={data.nom} avatar={data.avatar} mail={data.mail} dept={data.dept} status={data.status}></Tr> ) }) } </tbody> </table> ) } function Tr(id, nom, avatar, mail,dept, status){ return( <tr className="bg-gray-50 text-center"> <td className="px-16 py-2"> <img src={avatar||'#'} alt="" /> <span>{nom||'inconu'}</span> </td> <td className="px-16 py-2 "> <span>{mail||'inconu'}</span> </td> <td className="px-16 py-2 "> <span>{dept||'inconu'}</span> </td> <td className="px-16 py-2 "> <button className="cursor"> <span className="bg-green-500 text-white px-5 py-1 rounded-full"> {status||'indéfini'} </span> </button> </td> <td className="px-16 py-2 flex justify-around gap-5 items-center"> <button className="cursor"> <BiEdit size={25} color={"gray"}></BiEdit> </button> <button className="cursor"> <BiTrashAlt size={25} color={"red"}></BiTrashAlt> </button> </td> </tr> ); } The error says that:
Server Error Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead. This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack renderNodeDestructiveImpl file:///C:/Users/Arotiana's/intravak/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6179:11) I understand this but I thought that the .map method used with JSON objects returns an array. I'm totally confused. Help would be very appreciated
