How can I send a GET request and have that data show up in a <div>?

Question

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;

Answer 1

You can use useState + useEffect

import React, { useState, useEffect } 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 Extend = ({ appointmentId }) => {
  const [appointmentData, setAppointmentData] = useState();

  useEffect(() => {
    const getAppointment = async () => {
      const res = await axios.get(`api/appointments/${appointmentId}`);
      setAppointmentData(res.data);
  }

  getAppointment();

  // data will get updated everytime the appointmentId changes  
  }, [appointmentId])

    return (
        <div id="appointment">
            <div id="appointmentDescription">
                Hi! Here are the details for your appointment:
                {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;

Answer 2

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

Answer 3

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>
    );
}

Answer 4

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;