Get API inside a component

Issue

This Content is from Stack Overflow. Question asked by user20027969

I have a Card component that takes values from a mapped database array. The problem is that the appby field gets the data as email and I have to make an api get by that email in order to display the name of the person whose email is. How can I do that so the ownerId(it stores the email) field in my database match with the name shown on screen. In short words, how can i do a get inside a component?

import React, { useEffect, useState } from "react";
import { useContext } from "react";
import Button from "../../components/button/button";
import Card from "../../components/card/card";
import Card2 from "../../components/card/card2";
import { RoomContext } from "../../assets/context/RoomContext";
import "./dashboard.scss";
import { MeetingContext } from "../../assets/context/MeetingContext";
import Meetings from "../meetings/meetings";
import axios from "axios";

const Dashboard = () => {
  const room = React.useContext<any[]>(RoomContext);
  const meeting = React.useContext<any[]>(MeetingContext);
  const [hostName, setHostName] = useState({
    host: "",
  });
  useEffect(() => {
    let hostEmail = "";
    meeting.map((dataObj) => (hostEmail = dataObj.ownerId));
    let name = "";
    meeting.map((data) => (name = data.name));
    console.log(name);

    axios.get(`http://localhost:4000/users/${hostEmail}`).then((res) => {
      setHostName({ host: res.data.name });
    });

    // let partEmail = [""];
    // meeting.map((dataObj) => (partEmail = dataObj.participantsId));
  }, []);

  return (
    <div className="dashboard">
      <div className="grid-container">
        <div className="left">
          <div className="text">
            <div className="welcome">Welcome back!</div>
            <div className="control">
              Control your schedule, be flexible and appoint new meeting rooms
              with your co-workers whenever you need.
            </div>
            <div className="last">
              LAST UPDATES
              <div className="button">
                <Button className="secondary" name="SCHEDULE A MEETING" />
              </div>
            </div>
          </div>
          <div className="cards">
            {meeting.map((dataObj) => {
              return (
                <div className="item">
                  <Card
                    className="card"
                    title={dataObj.name}
                    appFor={dataObj.startDate}
                    appBy={`http://localhost:4000/users/${dataObj.ownerId}`}
                    // cap={dataObj.cap}
                    //time={dataObj.time}
                  />
                </div>
              );
            })}
          </div>
        </div>
        <div className="right">
          <div className="schedule">SCHEDULE A MEETING ROOM</div>
          <div className="rightCards">
            {room.map((dataObj) => {
              return (
                <div className="item">
                  <Card2
                    className="card2"
                    title={dataObj.name}
                    // status={dataObj.status}
                    capacity={dataObj.capacity}
                    // active={dataObj.active}
                  />
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};
export default Dashboard;

I am referring to the Card component and the field is AppBy



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?