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