47 lines
887 B
TypeScript
47 lines
887 B
TypeScript
import React, { useEffect, useState }from 'react'
|
|
|
|
function index() {
|
|
|
|
//creating a state variable in order to display the data to the ui
|
|
//the state variable will display the word loading before the data is fetched
|
|
const [mesage, setMessage] = useState("Loading");
|
|
const [people, setPeople] = useState([]);
|
|
|
|
|
|
//useEffect to fetch the data from the api end point
|
|
//Emoty array is used at the end of the function so that its only called once
|
|
useEffect(() => {
|
|
fetch("http://localhost:8080/api/home").then(
|
|
response => response.json()
|
|
).then (
|
|
data => {
|
|
|
|
setMessage(data.msg);
|
|
setPeople(data.people);
|
|
|
|
}
|
|
);
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
return (
|
|
<div>
|
|
|
|
<div>{mesage}</div>
|
|
|
|
{people.map((person, index) => (
|
|
|
|
<div key={index}>
|
|
{person}
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
);
|
|
}
|
|
|
|
export default index |