I have the following little React component that I want to show the appointment information via an Axios get request, and update the appointment via an Axios put request.
Well, I have the put request working when the user clicks the button.
But I'm unsure of how to actually show the appointment information.
When the page loads, I want the user to see their appointment info in the appointmentDescription section, but I'm unsure of how to populate that.
Here is my code:
import React from "react";
import axios from 'axios';
import Button from 'react-bootstrap/Button';
const extendAppointment = async (id) => {
await axios.put('api/appointments/ExtendAppointment/' + id)
.then(res => console.log(res.data));
};
const handleExtend = async (id) => {
await extendAppointment(id);
};
const getAppointment = async (id) => {
await axios.get('api/appointments/' + id);
}
const Extend = ({ appointmentId }) => {
return (
<div id="appointment">
<div id="appointmentDescription">
Hi! Here are the details for your appointment:
{/*show appointment details*/}
</div>
<div id="updateAppointment">
Do you need to extend your appointment?
<Button onClick={() => handleExtend(appointmentId)}>Click here to extend your appointment</Button>
</div>
</div>
);
}
export default Extend;
use useState hook to store data after API call
import React, { useState } from "react";
import axios from 'axios';
import Button from 'react-bootstrap/Button';
const Extend = ({ appointmentId }) => {
const [appointmentData, setAppointmentData] = useState({})
const extendAppointment = async (id) => {
await axios.put('api/appointments/ExtendAppointment/' + id)
.then(res => {
if (res.data) {
setAppointmentData(res.data)
}
});
};
const handleExtend = async (id) => {
await extendAppointment(id);
};
const getAppointment = async (id) => {
await axios.get('api/appointments/' + id);
}
return (
<div id="appointment">
<div id="appointmentDescription">
{appointmentData}
</div>
<div id="updateAppointment">
Do you need to extend your appointment?
<Button onClick={() => handleExtend(appointmentId)}>Click here to extend your appointment</Button>
</div>
</div>
);
}
export default Extend;
Read up about useState, its a classic way to store component level data and populate wherever needed.
Combining it with useEffect, you invoke your APIs after the DOM gets mounted.
import React, { useState, useEffect } from "react";
export const Extend = ({ appointmentId }) => {
const [appointmentDetails, setAppointmentDetails] = useState(null);
const [error, setError] = useState(null); // any api error
// This should be inside your React component to be able to set data in your component.
const getAppointment = async (id) => {
try {
setError(false);
const { data } = await axios.get('api/appointments/' + id);
setAppointmentDetails(data);
} catch (error) {
setError(true);
}
}
const extendAppointment = async (id) => {
await axios.put('api/appointments/ExtendAppointment/' + id)
.then(res => console.log(res.data));
};
const handleExtend = async (id) => {
await extendAppointment(id);
};
// Invoke api after the component is mounted on the DOM.
useEffect(() => {
getAppointment();
}, []) // Empty so it gets called only once!
return (
<div id= "appointment" >
// Show appointment details only when the its set in state
{ appointmentDetails && !error (
<div id="appointmentDescription">
Hi! Here are the details for your appointment:
</div>
)}
<div id="updateAppointment">
Do you need to extend your appointment?
<Button onClick={() => handleExtend(appointmentId)}>Click here to extend your appointment</Button>
</div>
</div>
);
}
Now whereever you need to render Extend component, just pass the appointmentId as a prop.
<Extend appointmentId={1} />
You should use useState for this one.
something like that :
import React, { useState } from "react";
import axios from 'axios';
import Button from 'react-bootstrap/Button';
const Extend = ({ appointmentId }) => {
const [info, setInfo] = useState('')
const extendAppointment = async (id) => {
await axios.put('api/appointments/ExtendAppointment/' + id)
.then(res => console.log(res.data));
};
const getAppointment = async (id) => {
const result = await axios.get('api/appointments/' + id);
setInfo(result.data) // put what you get, depend on your API
}
const handleExtend = async (id) => {
await extendAppointment(id);
}
return (
<div id="appointment">
<div id="appointmentDescription">
Hi! Here are the details for your appointment:
{info} // info will dislplay here
</div>
<div id="updateAppointment">
Do you need to extend your appointment?
<Button onClick={() => handleExtend(appointmentId)}>Click here to extend your appointment</Button>
</div>
</div>
);
}