Fetch Data from JSON File and render in custom JSX component using .map() method -Next JS-CodePudding

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

CodePudding user response：

You’re not destructuring these props, so id ends up being your entire props object:

Tr(id, nom, avatar, mail,dept, status){

Try adding the curlies:

Tr({id, nom, avatar, mail,dept, status}){