back.js

const express = require('express')
const app = express()
var cors = require('cors')
const port = 4000

const { MongoClient } = require("mongodb");
const connectionString = "mongodb+srv://user:user@cluster0.5ksjv.mongodb.net/myFirstDatabase?retryWrites=true&w=majority";
const client = new MongoClient(connectionString, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

let dbConnection;
let data

  client.connect((err, db) => {
    if (err || !db) {
      console.error("ERRRRRRRRRROR DBBBBBBBBBBBBBBBB")
    }

    dbConnection = db.db("students")
    console.log("Successfully connected to MongoDB.")

data = dbConnection.collection("data").find({})
console.log(data)
  })



app.use(express.json())
app.use(cors())
app.use(function (req, res, next) {
  console.log('Time:', Date.now())
  next()
})

app.get('/getStudents', (req, res) => {
  res.json(data.students)
})

app.get('/getGroups', (req, res) => {
  res.json(data.groups)
})

app.post('/deleteStudent', (req, res) => {
  data.students = data.students.filter(s => s.id !== req.body.id)
  res.status(200)
})

app.post('/deleteGroup', (req, res) => {
  data.groups = data.groups.filter(g => g.id !== req.body.id)
  data.students = data.students.filter(s => s.group_id !== req.body.id)
  res.status(200)
})

app.post('/updateStudent', (req, res) => {
  const idx = data.students.findIndex(s => s.id === req.body.id)
  data.students[idx] = req.body.s
  data.students[idx].id = req.body.id
  res.status(200)
})

app.post('/updateGroup', (req, res) => {
  const idx = data.groups.findIndex(g => g.id === req.body.id)
  data.groups[idx] = req.body.g
  data.groups[idx].id = req.body.id
  res.status(200)
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

crud.js

const get = async (endpoint) => {
  const response = await fetch(`http://127.0.0.1:4000${endpoint}`)
  return await response.json()
}

const post = async (endpoint, json) => {
  await fetch(`http://127.0.0.1:4000${endpoint}`, {
    headers: { "Content-Type": "application/json" },
    method: 'POST',
    body: JSON.stringify(json)
  })
}

const getGroups = async () =>
  get("/getGroups")

const getStudents = async () =>
  get("/getStudents")

const deleteGroup = async (id) =>
  await post("/deleteGroup", { id: id })

const deleteStudent = async (id) =>
  await post("/deleteStudent", { id: id })

const updateGroup = async (id, g) =>
  await post("/updateGroup", { id: id, g: g })

const updateStudent = async (id, s) =>
  await post("/updateStudent", { id: id, s: s })

export { getGroups, getStudents, deleteGroup, deleteStudent, updateGroup, updateStudent }

Student.js

import { useState, useEffect } from 'react'
import { Link } from "react-router-dom"

export default function Students({ getStudents, getGroups }) {
  const [state, setState] = useState(null)

  useEffect(() => {
     async function fetchData() {
         setState({
           students: await getStudents(),
           groups: await getGroups()
         })
     }

     fetchData()
  }, [getStudents, getGroups])

  const getGroupNameById = (id) => state.groups.find((g) => g.id === id).name

  if (state === null)
    return <></>

  return (
    <>
      <div><Link to="/groups">Groups</Link></div>
      <div><Link to="/editGroups">Edit</Link></div>

      <table>
        <thead>
          <tr>
            <td>ID</td>
            <td>Name</td>
            <td>Age</td>
            <td>Group</td>
            <td>Type</td>
            <td>Avg. grade</td>
          </tr>
        </thead>

        <tbody>
          {
            state.students.map((s, i) => {
              return (
                <tr key={i}>
                  <td>{s.id}</td>
                  <td>{s.name}</td>
                  <td>{s.age}</td>
                  <td>{getGroupNameById(s.group_id)}</td>
                  <td>{s.type}</td>
                  <td>{s.avg_grade}</td>
                </tr>
              )
            })
          }
        </tbody>
      </table>
    </>
  )
}