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
Wojciech Staniszewski staff answered 3 years ago
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
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)