Koa simple CRUD - doesnt get any output

See more:

ReactJS

When I am con=mpiling my front end i didnt got any output.

Please help me to solve this. I am uploading my full front end

What I have tried:

import React from "react";
import { useEffect, useState } from "react";
import axios from "axios";

const StudentPage = () => {
  const [name, setName] = useState("");
  const [nic, setNIC] = useState("");
  const [age, setAge] = useState("");
  const [courseId, setCourseId] = useState("");

  const [students, setStudents] = useState([]);
  const [courses, setCourses] = useState([]);

  const [isEditClick, setIsEditClick] = useState(false);
  const [editName, setEditName] = useState("");
  const [editNIC, setEditNIC] = useState("");
  const [editAge, setEditAge] = useState("");
  const [editCourseId, setEditCourseId] = useState("");

  const [editId, setEditId] = useState("")

  useEffect(() => {
    axios.get(`${process.env.BASE_URL}/course/`).then((res) => {
      setCourses(res.data);
    });
    axios.get(`${process.env.BASE_URL}/student/`).then((res) => {
      setStudents(res.data);
    });
  }, []);

 
  const addStudent = (e) => {
    e.preventDefault();
    const studentObj={
      name,nic,age,
      courseId,
    };

     axios
      .post(`${process.env.BASE_URL}/student/add`, studentObject)
      .then((res) => {
        alert("Data added");
        axios.get(`${process.env.BASE_URL}/student/`).then((res) => {
          setStudents(res.data);
        });
        setName("");
        setNIC("");
        setAge("");
        setCourseId("");
      })
      .catch((err) => {
        alert(err.message);
      });
  };

  const updateStudent = (e) => {
    e.preventDefault();

      const studentObj = {
        name: editName,
        nic:editNIC,
        age:editAge,
      };
      console.log(studentObj);

      axios
        .put(`${process.env.BASE_URL}/student/${editId}`, studentObj)
        .then((res) => {
          alert("Course Updated");
          axios.get(`${process.env.BASE_URL}/student/`).then((res) => {
            setStudents(res.data);
          });
          setIsEditClick(false);
        })
        .catch((err) => {
          alert(err.message);
        });
  };

  const deleteStudent = (e) => {
    e.preventDefault();

    axios
      .delete(`${process.env.BASE_URL}/student/${e.target.id}`)
      .then((res) => {
         axios.get(`${process.env.BASE_URL}/student/`).then((res) => {
           setStudents(res.data);
         });
      })
      .catch((err) => {
        alert(err.message);
      });
  };

  const onEditClick = (e) => {

    e.preventDefault();
    setEditId(e.target.id);
    const student = students.find((student) => 
      student._id === e.target.id
    );

      setEditName(student.name);
       setEditNIC(student.nic);
      setEditAge(student.age);
     
      setIsEditClick(!isEditClick);

  };

  return (
    <div>
      <h1>Student Page</h1>
      <div style={{ marginBottom: 5 }}>
        <input
          type="text"
          placeholder="Enter name"
          value={name}
          style={{ margin: 5 }}
          onChange={(e) => setName(e.target.value)}
        />
        <input
          type="text"
          placeholder="Enter nic"
          value={nic}
          style={{ margin: 5 }}
          onChange={(e) => setNIC(e.target.value)}
        />
        <input
          type="number"
          placeholder="Enter age"
          value={age}
          style={{ margin: 5 }}
          onChange={(e) => setAge(e.target.value)}
        />
        <select onChange={(e) => setCourseId(e.target.value)}>
        <option>Select the Course</option>
          {courses &&
            courses.length > 0 &&
            courses.map((course, index) => (
              <option value={course._id} key={index}>
                {course.courseName}
              </option>
            ))}
        </select>
        <button onClick={(e) => addStudent(e)} style={{ margin: 5 }}>
          Submit
        </button>
      </div>

      <table>
    
          <thead>
            <tr>
              <th>Name</th>
              <th>NIC</th>
              <th>Age</th>
              <th>Course</th>
              <th>Actions</th>
            </tr>
          </thead>

        <tbody>
          {students &&
            students.length > 0 &&
            students.map((student, index) => (
              <tr key={index}>
                <td>{isEditClick && student._id===editId ? (
                  <input
                    type="text"
                    value={editName}
                    onChange={(e)=>setEditName(e.target.value)}
                  />
                )
                :(student.name)}</td>
                <td>{isEditClick && student._id === editId?(
                <input
                  type="text"
                  value={editNIC}
                  onChange={(e)=>setEditNIC(e.target.value)}
                />
                )
                :(student.nic)}</td>
                <td>{isEditClick && student._id === editId?(
                  <input
                    type="number"
                    value={editAge}
                    onChange={(e)=>setEditAge(e.target.value)}
                  />
                ):(student.age)}
                </td>
                <td>{student.courseId && student.courseId.courseName}</td>

               <td>
               <button id = {student._id} onClick={(e)=>onEditClick(e)}>
                {isEditClick && student._id === editId 
                ? "Cancel"
                : "Update"}
                </button>
                {isEditClick && student._id=== editId && (
                  <button onClick={(e) => updateStudent(e)}>Update</button>
                )}
               </td>
               <td>
                <button id= {student._id} onClick={(e)=> deleteStudent(e)}>Delete</button>
               </td>
              </tr>
            ))}
        </tbody>
      </table>
    </div>
  );
};

export default StudentPage;