This is the frontend of my application. All crud operations working fine. I need to display courses using database data without hard coding it. In here nothing displayed in dropdown menu

Does anyone know the solution for this?

In the backend, I used mongoose to connect the database

The student and course model have the all necessary values.

controller has the CRUD implementation

routes has the paths of the CRUD operations

Student.js

 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`, studentObj)
              .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) => (
                      <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;

CodePudding user response：

Change your this part

        <select onChange={(e) => setCourseId(e.target.value)}>
                        <option>Select the Course</option>
                          {courses &&
                            courses.length > 0 &&
                            courses.map((course) => (
                              <option value={course._id} key={index}>
                                {course.courseName}
                              </option>
                            ))}
                        </select>
    

to this part (course, index)

     <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>