text: //Import in useContext, Data-body css and DataAreaContext
  import React, { useContext } from "react";
  import "./Data-Body.css";
  import DataAreaContext from "../../utils/DataAreaContext";
  
  const DataBody = () => {
    const context = useContext(DataAreaContext);
  
    //function to format the date
    function formatDate(date) {
      const dateArray = date.split("-");
      const year = dateArray[0];
      const month = dateArray[1];
      const dayArray = dateArray[2].split("T");
      const day = dayArray[0];
      const styledDate = [month, day, year].join("-");
      return styledDate;
    }
  
    return (
      <tbody>
        {context.developerState.filteredUsers[0] !== undefined &&
        context.developerState.filteredUsers[0].name !== undefined ? (
          context.developerState.filteredUsers.map(
            ({ login, name, picture, phone, email, dob }) => {
              return (
                <tr key={login.uuid}>
                  <td data-th="Image" className="align-middle">
                    <img
                      src={picture.medium}
                      alt={"profile image for " + name.first + " " + name.last}
                      className="img-responsive"
                    />
                  </td>
                  <td data-th="Name" className="name-cell align-middle">
                    {name.first} {name.last}
                  </td>
                  <td data-th="Phone" className="align-middle">
                    {phone}
                  </td>
                  <td data-th="Email" className="align-middle">
                    <a href={"mailto:" + email} target="__blank">
                      {email}
                    </a>
                  </td>
                  <td data-th="DOB" className="align-middle">
                    {formatDate(dob.date)}
                  </td>
                </tr>
              );
            }
          )
        ) : (
          <></>
        )}
      </tbody>
    );
  };
  
  export default DataBody;
  