How to get the id in Material Table?

Question

I am using "material-table": "1.53.0", with the editable and onRowUpdate options, I want to update the data in my table. I am using axios to call the put method, I can see the tab data well but when modifying any field and click on save

I see the following error:

xhr.js:166 PUT http://localhost:xxxx/api/User/edit/?IdUser=1 404 (Not Found)

I realized that no matter what line I want to update, it always tells me that I am calling a 1 for the id and the IdUser is not being sent, but as I am doing it correctly

What is the way to get the idUser of the row?

import React, { useState, useEffect } from 'react';
import MaterialTable from 'material-table';
import  axios  from 'axios';

export default function UserTable() {

const url='/api/Users';

const [user, setUser]= useState({DataUser:[]});


 useEffect(()=>{
    const getUser=async()=>{
            const response =await axios.get(url);
            setUser(response.data);
    }
    getUser();
},[]);

  return (
    <MaterialTable
    title="Users"
    columns={[
      {title: 'IdUser',field: 'IdUser', type: 'numeric', hidden:'false'},
      {title: 'name',field: 'name'},
      { title: 'lastname', field: 'lastname' },
      { title: 'age', field: 'age', type: 'numeric' },
    ]}
    data={user.DataUser}
    options={{
      filtering: true
    }}
    editable={{
      onRowUpdate: (newData, oldData) =>
      new Promise(resolve => {
          setTimeout(() => {
          resolve();
          const data=[...user.DataUser];
          data[data.indexOf(oldData)] = newData;
          axios.put('api/User/edit/', newData,{
                  params: {
                    id:user.DataUser[0].IdUser
                  }
              })
              .then(res => console.log(res.DataUser));
              setUser({...user,data});
      }, 600);
  }),
  }}
  />
);
}

score 1 · Accepted Answer · answered Nov 15 '19 at 11:35

1

Instead of passing the first user id with user.DataUser[0].IdUser, you should access the id from the user that is passed in the callback as newData.

So change the axios call should do the trick:

editable={{
  onRowUpdate: (newData, oldData) =>
  new Promise(resolve => {
      setTimeout(() => {
      resolve();
      const data=[...user.DataUser];
      data[data.indexOf(oldData)] = newData;
      axios.put('api/User/edit/', newData,{
              params: {
                id: newData.IdUser
              }
          })
          .then(res => console.log(res.DataUser));
          setUser({...user,data});
  }, 600);

answered Nov 15 '19 at 11:35

Domino987

8,475
2
15
38

It is updated but I still throw the same error PUT http: // localhost: xxxx / api / User / edit /? IdUser = 1 404 (Not Found) and I have to reload the page to show the changes – Emm Nov 18 '19 at 21:14
Can you console.log setUser({...user,data}) to see if that returns the correct array? – Domino987 Nov 18 '19 at 21:33
console.log setUser ({... user, data}), throw undefined but when doing console.log ('new Data.IdUser') if it throws the correct id – Emm Nov 18 '19 at 22:20

How to get the id in Material Table?

1 Answers1