Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: o.map is not a function Error

Wontone Saju free asked 3 years ago


Hi

i am facing a issue with the datatable. I d'ont know where i am making the issue but it look like a small issue.

import React, {useState, useEffect} from "react";
import {useSubheader} from "../../_metronic/layout";
import { MDBDataTableV5 } from 'mdbreact';
import axios from "axios";

export const Client = () => {
  const suhbeader = useSubheader();
  suhbeader.setTitle("Clients");
  const [rowsdata,setrowdata] = useState([]);

  var row_value;

  const getallusers = () => {

      var api_token=JSON.parse(localStorage.getItem("persist:v726-demo1-auth"));
      var token_de=api_token.authToken;

      axios.get('http://localhost/ypwo/backofficeapi/public/api/admin/getallusers', 
      {api_token: token_de},
      {
    headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }
}).then(function (response) {
    console.log(response.data);
    setrowdata(response.data);


  })
  .catch(function (error) {
    console.log(error);
  }); 
  }

  useEffect(() => {
      getallusers();
  },[]);

  alert(JSON.stringify(rowsdata));
  const [datatable, setDatatable] = useState({
    columns: [
      {
        label: 'api_token',
        field: 'api_token',
        width: 150,
        attributes: {
          'aria-controls': 'DataTable',
          'aria-label': 'api_token',
        },
      },
      {
        label: 'created_at',
        field: 'created_at',
        width: 270,
      },
      {
        label: 'email',
        field: 'email',
        width: 200,
      },
       {
        label: 'email_verified_at',
        field: 'email_verified_at',
        width: 200,
      },
      {
        label: 'id',
        field: 'id',
        width: 200,
      },
      {
        label: 'name',
        field: 'name',
        width: 200,
      },
       {
        label: 'otpcode',
        field: 'otpcode',
        width: 200,
      },
      {
        label: 'status',
        field: 'status',
        width: 200,
      },
       {
        label: 'updated_at',
        field: 'updated_at',
        width: 200,
      },
      {
        label: 'username',
        field: 'username',
        width: 200,
      },
      {
        label: 'usertype',
        field: 'usertype',
        width: 200,
      },
    ],
    rows:JSON.stringify(rowsdata)

    });



  return (
  <>
   <div className="card card-custom gutter-b">
        <div className="card-header">
          <div className="card-title">
            <h3 className="card-label">List of all users</h3>
          </div>
          <div className="card-toolbar"></div>
        </div>
        <div className="card-body">
        {JSON.stringify(rowsdata)}
         <MDBDataTableV5 barReverse hover data={datatable} pagingTop
      searchTop
      searchBottom={false}/>
        </div>
      </div>

  </>);
}

i am getting a error which TypeError: o.map is not a function D:/web/htdocs/mydsc/node_modules/mdbreact/dist/mdbreact.esm.js:2089


Krzysztof Wilk staff commented 3 years ago

Hi!

It's hard to say anything without API from your server. Are you sure that rowsdata is an array of objects? The code can't map through something, so I assume that could be the problem :)

Keep coding!


Wontone Saju free commented 3 years ago

i solved that issue but facing two things if you could help me to add (delete , checkbox and edit links)



Here is a simple example with Datatable containing a checkbox in one of the columns:

import React from "react";
import { MDBDataTableV5, MDBInput } from "mdbreact";

export default function App() {
  const [datatable, setDatatable] = React.useState({
    columns: [
      {
        label: "Name",
        field: "name",
        width: 150,
        attributes: {
          "aria-controls": "DataTable",
          "aria-label": "Name",
        },
      },
      {
        label: "Position",
        field: "position",
        width: 270,
      },
      {
        label: "Office",
        field: "office",
        width: 200,
      },
      {
        label: "Salary",
        field: "salary",
        sort: "disabled",
        width: 100,
      },
      {
        label: "Action",
        field: "action",
        sort: "disabled",
        width: 100,
      },
    ],
    rows: [
      {
        name: "Tiger Nixon",
        position: "System Architect",
        office: "Edinburgh",
        salary: "$320",
        action: <MDBInput type="checkbox" />,
      },
      {
        name: "Garrett Winters",
        position: "Accountant",
        office: "Tokyo",
        salary: "$170",
        action: <MDBInput type="checkbox" />,
      },
      {
        name: "Ashton Cox",
        position: "Junior Technical Author",
        office: "San Francisco",
        salary: "$86",
        action: <MDBInput type="checkbox" />,
      },
      {
        name: "Cedric Kelly",
        position: "Senior Javascript Developer",
        office: "Edinburgh",
        salary: "$433",
        action: <MDBInput type="checkbox" />,
      },
    ],
  });

  return (
    <MDBDataTableV5
      hover
      entriesOptions={[5, 20, 25]}
      entries={5}
      pagesAmount={4}
      data={datatable}
    />
  );
}

Wontone Saju free answered 3 years ago


That issue solved. But i am figuring out how to add delete, checkbox in this code.

import React, {useState,useEffect} from "react";
import {useSubheader} from "../../_metronic/layout";
import { MDBDataTableV5,MDBBtn,MDBInput } from 'mdbreact';
import {Button} from "react-bootstrap";
import axios from "axios";

export const User = () => {
  const suhbeader = useSubheader();
  suhbeader.setTitle("User");

  const [rowsdata,setrowdata] = useState([]);
  var api_token=JSON.parse(localStorage.getItem("persist:v726-demo1-auth"));
  var token_de=api_token.authToken;

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const getallusers = () => {
  axios.get('http://localhost/ypwo/backofficeapi/public/api/admin/getallusers', 
      {api_token: token_de},
      {
    headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }
  }).then(function (response) {
    //console.log(response.data);
    setrowdata(response.data);
  })
  .catch(function () {
    alert("Some error happening while loading a data.")
  }); 
  }

  useEffect(() => {
    getallusers();
  },[]);


const deleterecord = (id) =>{

  alert(id);
}

const [checkbox1, setCheckbox1] = React.useState('');

  const showLogs2 = (e) => {
    setCheckbox1(e);
  };


  return (
  <>
    <div className="card card-custom gutter-b">
        <div className="card-header">
          <div className="card-title">
            <h3 className="card-label">List of all users</h3>
          </div>
          <div className="card-toolbar">

          <Button variant="primary">Delete Record</Button>

          </div>
        </div>
        <div className="card-body">
        <MDBDataTableV5 barReverse hover data={{
            columns: [
            {
                label: 'name', 
                field: 'name',
        width: 150,
        attributes: {
          'aria-controls': 'DataTable',
          'aria-label': 'Name',
        },
            },
            {
                label: 'email', 
                field: 'email'
            },
            {
                label: 'username', 
                field: 'username'
            },
            {
                label: 'status', 
                field: 'status'
            },
            {
                label: 'usertype', 
                field: 'usertype'
            },
            {
                label: 'otpcode', 
                field: 'otpcode'
            },
      {
                label: 'Action', 
                field: 'action'
            },

            ],
            rows: rowsdata.map(row => (
            {
                name: row.name,
                email:row.email,
                username:row.username,
                userstatus:row.status,
                usertype:row.usertype,
                otpcode:row.otpcode,
        clickEvent: () => deleterecord(row.id)

            }))
          }} 
      pagingTop
      headCheckboxID='id2'
      bodyCheckboxID='checkboxes2'
      getValueCheckBox={(e) => {
        showLogs2(e);
      }}
      searchTop
      searchBottom={false}/>
        </div>
      </div>
  </>);
};

if any body help me out it will be good.


Wojciech Staniszewski staff commented 3 years ago

Could You be more specific about where do You want to add or delete a checkbox?


Wontone Saju free commented 3 years ago

Simple there will be one new field name as Action and this action will have Edit and Delete option.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 5.0.1
  • Device: Windows
  • Browser: Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No