The title is rewritten as: "The row number returned by the Mui data table is NaN"

Question

import React, { useState, useEffect } from "react";

import axios from "axios";

import io from "socket.io-client";

import { DataGrid } from "@mui/x-data-grid";

import NaveBar from "../NaveBar/NaveBar";

import SideBar from "../SideBar/SideBar";

import "./NewsTable.scss";

const socket = io("http://localhost:5000/");

const NewsTablee = () => {

  const [news, setNews] = useState([]);

  //update news deeebd

  useEffect(() => {

    const fetchData = async () => {

      try {

        const allnews = await axios.get("http://localhost:5000/api/news");

        setNews(allnews.data.Date);

      } catch (error) {

        console.log(error);

      }

    };

    socket.on("updateNewsTable", () => {

      fetchData();

    });

  }, [news]);

  useEffect(() => {

    axios

      .get("http://localhost:5000/api/news")

      .then((s) => {

        setNews(s.data.Date);

      })

      .catch((er) => {

        console.log(er);

      });

  }, []);

  const message = () => {

    socket.emit("a news updated", "a news updated");

  };

  const columns = [

    {

      field: "_id",

      headerName: "no",

      flex: 0.5,

      renderCell: (params) => {

        console.log(params.row.Index   1); // add this line

        return <div>{(params.row.index   1).toString()}</div>

        ;

      },

    },

    { field: "Title", headerName: "Title", flex: 3, sortable: true },

    { field: "createdAt", headerName: "createdAt", flex: 2 },

    { field: "UserName", headerName: "UserName", flex: 1 },

    { field: "Resurce", headerName: "Resurce", flex: 1 },

    { field: "Language", headerName: "Language", flex: 1 },

    { field: "ProtectionLevel", headerName: "Protection Level", flex: 1 },

    { field: "priority", headerName: "Priority", flex: 1 },

    { field: "Media", headerName: "Media", flex: 1 },

  ];

  return (

    <>

      <NaveBar />

      <SideBar />

      <div className='content-wrapper' style={{ minHeight: "1172.56px" }}>

        <div className='NewsTableContainer'>

          <div className='headrt'>

            <button

              onClick={message}

              style={{ height: 30, width: 30 }}></button>

          </div>

          <div style={{ height: "570px", width: "100%" }} className='newsTable'>

            <DataGrid

              rows={news}

              columns={columns}

              getRowId={(row) => row._id}

              sortModel={[{ field: "createdAt", sort: "desc" }]}

            />

          </div>

        </div>

      </div>

    </>

  );

};

Export default NewsTablee;}

The return line number is nan

Answer 1

As a good practice, I recommend redefining the columns like this:

{
      field: "_id",
      headerName: "no",
      flex: 0.5,
      type: 'number', valueGetter: (params) =>  `${params.row.index + 1}`
    },

Also, I assume that the {news} object does have an index attribute, which is a number.