Click here to Skip to main content
15,880,134 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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;
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900