I’ve confirmed that an API call I’m making does return the results I want, but for some reason those results are not showing up in the UI. I’m stuck at this point, any pointers would be appreciated.
import React, { useState } from "react";
import axios from 'axios';
import Button from '@mui/material/Button';
import moment from 'moment';
export default function Appointments({ teacher_id, date }) {
const [appointments, setAppointments] = useState([]);
function updateAppointments(data) {
setAppointments(data);
}
function getAppointmentsForTeacherForDate(teacher_id, date) {
axios.get(`http://localhost:3000/api/v1/teachers/${teacher}/appointmentsForDate/`,
{ params: { teacher_id: teacher_id, date: date }},
{withCredentials: true}
).then(response => {
if (response.data.appointments) {
updateAppointments(response.data.appointments);
} else {
console.log("Failed to get appointments for teacher");
}
})
}
return (
<>
<div>
{
appointments?.map(appt => {
<div key={appt.id}>
<h2>{appt.start_datetime}</h2><br></br>
<h2>{appt.teacher.first_name}</h2><br></br>
<h2>{appt.status}</h2>
</div>
})
}
</div>
</>
);
}
Currently, this is returning nothing at all, even though the API response shows an array of appointments when I log to console.