React Edit button + populate input field (PUT METHOD/PUT REQUEST)

Question

I am creating one app, where the backend is Node js, server is express server, Postgresql database and sequlize for the database connection and models, REST API. I tested my app by POSTMAN. My app works fine from the backend and also all CRUD method. I used React js for the frontend. I am successfully able to display, add and delete the data from the database. But I am stuck in update the data. This is my first time I am using PUT method. I really don't know how to edit the valid data. My app visualization. After reading couple of articles I made the app like this. I will really glad if anyone helps me out. This is my project's Gitlab repo.

This is my app.js where I use react-dom redirect the edit to UpdateStudent component

import React from "react";
import Dashboard from "./components/Dashboard/Dashboard";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import UpdateStudent from "./components/UpdateStudent/UpdateStudent";
import Datatable from "./components/Datatable/Datatable";
function App() {
  return (
    
      
        
        
          
          
        
      
    
  );
}

export default App;

This is APIs which I imported from the backend to front

   export async function logEntry() {
  const response = await fetch("/students");
  return response.json();
}
export async function singleStudent(id) {
  const response = await fetch(`/students/${id}`);
  return await response.json();
}

export async function updateStudent(id, studentToUpdate) {
  const response = await fetch(`/students/${id}`, {
    method: "PUT",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(studentToUpdate)
  });
  return await response.json();
}

export async function deleteStudent(id) {
  const response = await fetch(`/students/${id}`, {
    method: "DELETE"
  });
  return response.json();
}

This is the main component where I am displaying all the data. I successfully implement delete button logic. But after clicking the edit button it shows like this (image) which is quite odd-looking.

import React, { useState, useEffect } from "react";
import { logEntry, deleteStudent, updateStudent } from "../Api/Api";
import { Link } from "react-router-dom";
import UpdateStudents from "../UpdateStudent/UpdateStudent";

function Datatable() {
  const [total, settotal] = useState([]);
  const [searchItem, setsearchItem] = useState({
    item: ""
  });
  const [data, setdata] = useState([]);
  const handleChange = e => {
    setsearchItem({ item: e.target.value });
  };

  const getEntries = async () => {
    const logEntries = await logEntry();

    //console.log(logEntries);
    settotal(logEntries.count);
    setdata(logEntries.students);
  };

  const deleteData = async id => {
    //console.log(id);
    await deleteStudent(id);
  };

  const update = async id => {
    console.log(id);
    await updateStudent(id);
  };
  useEffect(() => {
    getEntries();
  }, []);

  return (
    
      
         handleChange(e)}
          style={{ width: "200px", height: "30px" }}
          value={searchItem.item}
        />
      
      Total student: {total} 
      
          {data
            .filter(student => {
              return student.name
                .toLowerCase()
                .includes(searchItem.item.toLowerCase());
            })
            .map(student => {
              return (
                
              );
            })}
        
        
          
            Name
            City
            Address
            Phone
            Email
            Date of birth
            Zipcode
          
        

        
                  {student.name}
                  {student.city}
                  {student.address}
                  {student.phone}
                  {student.email}
                  {student.birthday}
                  {student.zipcode}
                  
                     deleteData(student.id)}
                    >
                      Delete
                    
                  
                  
                    
                      Edit //THIS IS THE EDIT BUTTON WHERE I WANT TO POPULATE THE INPUT FIELD AND EDIT THE DATA.
                    
                  
                
      
    
  );
}

export default Datatable;

This is the update input field where it will direct the update component. I don't know how to populate the field.

import React, { useState, useEffect } from "react";
import { updateStudent, singleStudent } from "../Api/Api";

function UpdateStudents() {
  const [student, setStudent] = useState({
    name: "",
    birthday: "",
    address: "",
    zipcode: "",
    city: "",
    phone: "",
    email: ""
  });

  return (
    
      
        
          
            
              
                
                Name
              
            
            
              
                
                Date of birth
              
            
            
              
                
                Address
              
            
            
              
                
                Zipcode
              
            
            
              
                
                City
              
            
            
              
                
                Phone
              
            
            
              
                
                Email
              
            
            
          
        
      
    
  );
}

export default UpdateStudents;

React Edit button + populate input field (PUT METHOD/PUT REQUEST)

0 Answers