How can I fetch data with an array in react?

Question

I am trying to get all data of the applicants in an array:

Here is following code that how I fetch an array:

const [applicants, setTeamApplications] = useState([]);

  const fetchApplicationData = async () => {
    const res = await axios.get(`/api/v1/invites/team/applications/${teamId}`);

 const items = res.data.map((item) =>
  await axios.get(`/api/v1/profiles/profile/${item.applicant_publicId}`)
);

    // Set state
    setTeamApplications(res.data);
    // Toggle loading state
    setLoadingState(false);
  };

after I console.log(applicants)

it gave me this:

[{…}]
0:
applicant_publicId: "La1618912810062"
application_letter: "apply"
id: 3
response: "Waiting on review"

Now im trying to fetch data again with the applicant_publicId to get more data:

/api/v1/profiles/profile/${index.applicant_publicId}

How can I do that?

Where are you trying to fetch more data? Please update your question and code snippet and show us. — Drew Reese
– Drew Reese, Commented Apr 21, 2021 at 3:42
You can use the find method and save the id needed in variable then use that. — BFP
– BFP, Commented Apr 21, 2021 at 3:42

Drew Reese · Accepted Answer · 2021-04-21 04:08:32Z

1

You can't await inside the .map callback as it is synchronous, but you can map the response data to an array of requests for the profiles and use Promise.all and wait for them all to resolve to an array of profiles.

const [applicants, setTeamApplications] = useState([]);

const fetchApplicationData = async () => {
  // Toggle loading state
  setLoadingState(true);

  try {
    const res = await axios.get(`/api/v1/invites/team/applications/${teamId}`);

    const profileReqs = res.data.map((item) =>
      axios.get(`/api/v1/profiles/profile/${item.applicant_publicId}`)
    );

    const items = await Promise.all(profileReqs);

    // Set state
    setTeamApplications(res.data);
    setProfiles(items);

  } catch (error) {
    // handler any error state?
  } finally {
    // Toggle loading state
    setLoadingState(false);
  }
};

answered Apr 21, 2021 at 4:08

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I fetch data with an array in react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related