مشکل تو ری اکت

 
import { NavLink, useNavigate, useParams } from "react-router-dom";
import {
  GetReserveAll,
  GetReserveDetailsById,
  acceptReserve,
} from "../../core/services/api/Details/ReserveDetails";
import { GetCoursesDetailsById } from "../../core/services/api/Details/CoursesDetails";
import { GetCoursesGroup } from "../../core/services/api/Group/GetCoursesGroup";
 
const AllReserve = () => {
  const navigate = useNavigate();
  const UserId = useParams().id;
  const [CoursesDetailsById, setCoursesDetailsById] = useState([]);
  const [details, setDetails] = useState();
  const [GroupId, setGroupId] = useState();
 
  const getList = async () => {
    const courses = await GetReserveAll();
    setCoursesDetailsById(courses);
  };
  useEffect(() => {
    getList();
  }, []);
  const Details = async (values) => {
    console.log(values.courseId);
    const CoursesId = values.courseId;
    console.log();
    const courses2 = await GetCoursesDetailsById(CoursesId);
    setDetails(courses2);
    const courses3 = await GetCoursesGroup(courses2.teacherId, CoursesId);
    setGroupId(courses3);
  };
  useEffect(() => {
    Details();
  }, []);
 
  const ChangeToAccept = async (values) =>{
    // courseGroupId: GroupId.map(g => g.groupId),
 
    var raw = {
      courseId:  values.courseId,
      courseGroupId: GroupId.map(g => g)[0].groupId,
 
      studentId: `${values.student}`
    };
    const  user = await acceptReserve(raw)
  }
 
  return (
    <>
      <div className="table-responsive ">
        <table className="table  ">
          <caption> لیست جزیات رزرو ها</caption>
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">نام دوره</th>
              <th scope="col">نام دانشجو</th>
              <th scope="col" className="">
                وضعیت
              </th>
              <th scope="col" className="">
                تغییر وضعیت
              </th>
            </tr>
          </thead>
 
          {CoursesDetailsById.map((Courses, index) => {
            return (
              <tbody>
                <tr key={index} className="bg-light">
                  <td>{index + 1}</td>
                  <td>
                    <NavLink
                      to={`/Courses/listCourses/CoursesDetails/${Courses.courseId}`}
                    >
                      {Courses.courseName}
                    </NavLink>
                  </td>
 
                  <td>
                    <NavLink
                      to={`/Student/listStudent/StudentDetails/${Courses.studentId}`}
                    >
                      {Courses.studentName}
                    </NavLink>
                  </td>
 
                  <td
                    className={`text-${Courses.accept ? "success" : "danger"}`}
                  >
                    {Courses.accept ? "تایید شده" : "تایید نشده"}
                  </td>
 
                  <td
                    className={`text-${Courses.accept ? "success" : "danger"}`}
                  >
                    {Courses.accept ? (
                      "از قبل تایید شده"
                    ) : (
                      <button
                        type="button"
                        onClick={() =>
                          {
 
                            Details({courseId: Courses.courseId})
 
                                           ChangeToAccept({
                              student: Courses.studentId,
                              courseId: Courses.courseId,
                            });
 
                          }
 
                        }
                        class="btn btn-warning"
                      >
                        تغییر برای تایید شده{" "}
                      </button>
                    )}
                  </td>
                </tr>
              </tbody>
            );
          })}
        </table>
      </div>
    </>
  );
};
 
export default AllReserve;

 
 
مشکل تو ری اکت میخام فانکشن چنتو اکسپت بعد کال شدن کامل فانکشن دیتیلز انجام بشه الان مشکش اینه که دوبار باید رو باتن کلیک کنم که تا عملیات پست چنج تو اکسپت انجام بشه