How to update an object using axios and json server in a react hooks project

Question

I am using a dialog box in a table to edit a row with axios.patch request. While clicking the edit button the values of that particular row are rendered into the TextFields which are in Dialog box but I'm unable to update the values. can anyone help me with this? Please see the Sandox link for better understanding. Thank you.

Sandbox link: https://codesandbox.io/s/material-demo-forked-gdxl3?file=/demo.js

code:

import React, { useState } from "react";

import {
Button,
Typography,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Table,
TableCell,
TableBody,
TableRow
} from "@material-ui/core";
import { axios } from "./Axios";
import { ValidatorForm, TextValidator } from "react-material-ui-form-validator";
import UserForm from "./UserForm";
import UserTable from "./Table";

export default function SimpleCard() {
 const [users, setUsers] = useState([]);

  const [postUser, setPostUser] = useState({
    id: "",
    name: "",
    email: ""
  });

  // console.log(users)

   const getUsers = async () => {
    const response = await axios.get("/contacts");

  if (response && response.data) {
  setUsers(response.data);
  }
  };

  React.useEffect(() => {
  getUsers();
   }, []);

  // dialog

  const [open, setOpen] = React.useState(false);
  const [fullWidth, setFullWidth] = React.useState(true);
  const [maxWidth, setMaxWidth] = React.useState("sm");

  const handleClickOpen = () => {
   setOpen(true);
  };

  const [open1, setOpen1] = React.useState(false);

  const closeDialogForm = () => {
  let userDetails = { ...postUser };

   userDetails.id = "";
   userDetails.name = "";
   userDetails.email = "";

   setPostUser(userDetails);
  };

 const handleClose = () => {
   closeDialogForm();
   setOpen(false);
 };

 const handleClose1 = () => {
   closeDialogForm();
   setOpen1(false);
 };

 const submitForm = async () => {
   const response = await axios.post("/contacts", postUser).catch((error) => {
  console.log(error);
  });

console.log(response);

if (response) {
  getUsers();
}

closeDialogForm();
};

 const openEditUserDialog = (id) => {
  let userDetails = { ...postUser };

  for (let index = 0; index < users.length; index++) {
  if (id === users[index].id) {
    userDetails.id = users[index].id;
    userDetails.name = users[index].name;
    userDetails.email = users[index].email;
  }
  }

  console.log(userDetails);

  setPostUser(userDetails);
  setOpen1(true);
 };

 const updateUser = async (id) => {
  const response = await axios
  .put(`/contacts/${id}`, postUser)
  .catch((error) => {
    console.log(error);
  });

// console.log(response)

if (response) {
  // setOpen(false);
  getUsers();
  }
 };

 const deleteUser = async (id) => {
  const response = await axios.delete(`/contacts/${id}`).catch((err) => {
  console.log(err);
  });

  if (response) {
  getUsers();
  }
  };

 return (
  <div>
  <Typography>Users</Typography>
  <Button
    size="small"
    variant="contained"
    onClick={handleClickOpen}
    style={{ textTransform: "none" }}
  >
    Add
  </Button>

  <UserTable
    users={users}
    openEditUserDialog={openEditUserDialog}
    deleteUser={deleteUser}
  />
  {/* dialog */}

  <Dialog
    fullWidth={fullWidth}
    maxWidth={maxWidth}
    open={open}
    // onClose={handleClose}
    aria-labelledby="max-width-dialog-title"
  >
    <DialogTitle id="max-width-dialog-title">Add contact</DialogTitle>

    <UserForm
      submitForm={submitForm}
      handleClose={handleClose}
      postUser={postUser}
      setPostUser={setPostUser}
    />
  </Dialog>

  {/* edit dialog */}

  <Dialog
    fullWidth={fullWidth}
    maxWidth={maxWidth}
    open={open1}
    // onClose={handleClose}
    aria-labelledby="edit-user"
  >
    <DialogTitle id="edit-user">Edit contact</DialogTitle>

    <UserForm
      submitForm={updateUser}
      handleClose={handleClose1}
      postUser={postUser}
      setPostUser={setPostUser}
    />
  </Dialog>
   </div>
 );
 }

backend json data:

{
  "contacts": [
{
  "id": 1,
  "name": "Gowtham",
  "email": "gowtham@gmail.com"
},
{
  "id": 2,
  "name": "King",
  "email": "gowthamKing@gmail.com"
},
{
  "id": 3,
  "name": "Hello",
  "email": "gowthamKing123@gmail.com"
}
 ]
 }

Try to split your UI into more than 2 components to make your code more cohesive & readable. For example, a table row could be a component that receives a user as props. — Janez Kuhar, Apr 24 '21 at 10:50
Can you please tell me where I went wrong while updating the values? Thank you. — Gowtham Manthena, Apr 24 '21 at 11:56

score 0 · Answer 1 · answered Apr 25 '21 at 07:58

I have found the solution. Just replace the updateUser arrow function with below code

const updateUser = async () => {

    let updateObject = {...postUser}

    const response = await axios.patch(`/contacts/${updateObject.id}`, postUser).catch(error => { console.log(error) })

    console.log(response)

    if (response) {
        // setOpen(false);
        getUsers()
    }

    handleClose1();

}

How to update an object using axios and json server in a react hooks project

1 Answers1