[SOLVED] Get API inside a component


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

    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 className="last">
              LAST UPDATES
              <div className="button">
                <Button className="secondary" name="SCHEDULE A MEETING" />
          <div className="cards">
            {meeting.map((dataObj) => {
              return (
                <div className="item">
                    // cap={dataObj.cap}
        <div className="right">
          <div className="schedule">SCHEDULE A MEETING ROOM</div>
          <div className="rightCards">
            {room.map((dataObj) => {
              return (
                <div className="item">
                    // status={dataObj.status}
                    // active={dataObj.active}
export default Dashboard;

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


Maybe you can add useEffect() with a dependencies array [appBy] in your card component.
like this

// Card component
import { useState, useEffect} from 'react'

function Card ({ appBy }){
  const [hostName, setHostName] = useEffect();

       .then((res) => {
         setHostName({ host: res.data.name });
  }, [appBy]);
  return <>

export default Card;

When appBy prop change, the Card component will send get reqeust, and render the hostName value to its.

This Question was asked in StackOverflow by user20027969 and Answered by HsuTingHuan It 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?