React Hook, Array of objects from different call of Axios

Question

I got this:

import React, { useState, useEffect } from 'react';
import axios from "axios";

function InsideRacesComponent() {

    const route = "http://localhost:4000/api/standings";
    const [data, setData] = useState([{ raceName: "", raceCountryFlag: "" }]);

    useEffect(() => {
        axios.get(route).then(res => {

            //The arrays that I want to fetch data and combine
            const raceNameData = res.data[0].InsideRaceResults
            const raceCountryData = res.data[0].RaceResults

            
            raceNameData.forEach(races => {
                const raceName = races.gpId;
            });


            raceCountryData.forEach(races => {
                const flagLink = races.gpCountryImage;
            })
        })
    }, []);

    return (
      //some html
    )

}

If I log raceNameData it looks like this:

(17) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {_id: "5fe8c55830013624e4716eed", gpId: "Austrian Grand Prix", grandPrixDate: "Sunday, July 5", grandPrixTrack: "Red Bull Ring", RaceResult: Array(20)}
1: {_id: "5fe8c55830013624e4716f02", gpId: "Styrian Grand Prix", grandPrixDate: "Sunday, July 12", grandPrixTrack: "Red Bull Ring", RaceResult: Array(20)}
2: {_id: "5fe8c55830013624e4716f17", gpId: "Hungarian Grand Prix", grandPrixDate: "Sunday, July 19", grandPrixTrack: "Hungaroring", RaceResult: Array(20)}
...

And raceCountryData like this:

(17) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {_id: "5fe8c55830013624e4716edc", gpCountryName: "Austria", gpCountryImage: "https://upload.wikimedia.org/wikipedia/commons/thu…lag_of_Austria.svg/1200px-Flag_of_Austria.svg.png"}
1: {_id: "5fe8c55830013624e4716edd", gpCountryName: "Austria", gpCountryImage: "https://upload.wikimedia.org/wikipedia/commons/thu…lag_of_Austria.svg/1200px-Flag_of_Austria.svg.png"}
2: {_id: "5fe8c55830013624e4716ede", gpCountryName: "Hungary", gpCountryImage: "https://upload.wikimedia.org/wikipedia/commons/thu…lag_of_Hungary.svg/1920px-Flag_of_Hungary.svg.png"}
...

Im looking for this when I log data from React Hook

console.log("data: " + data);

// data: [{ raceName: "Austrian Grand Prix", raceCountryFlag: "https://upload.wikimedia.org/wikipedia/commons/thu…lag_of_Austria.svg/1200px-Flag_of_Austria.svg.png" }, { raceName: "Styrian Grand Prix", raceCountryFlag: "https://upload.wikimedia.org/wikipedia/commons/thu…lag_of_Austria.svg/1200px-Flag_of_Austria.svg.png" } , { raceName: "Hungarian Grand Prix", raceCountryFlag: "https://upload.wikimedia.org/wikipedia/commons/thu…lag_of_Hungary.svg/1920px-Flag_of_Hungary.svg.png" }, ...]

I've tried with this in each one of the "array.forEach":

setData(prevValue => [...prevValue, { raceName: raceName, raceCountryFlag: "" }]

//and

setData(prevValue => [...prevValue, { raceName: "", raceCountryFlag: flagLink }]

of course my aproach has not logic 😅...

Thanks!

You would need some common item in name raceNameData and raceCountryData data so you can link the two. Right now the closest link is the country name, however they are different ie "Austrian Grand Prix" and "Austria". — Akshay
– Akshay, Commented Dec 28, 2020 at 13:18
As @Akshay said, you need to have a relationship between raceNameData and raceCountryData. I assume that you're using MongoDB, so you're probably looking for something like this. And I advise you that you take care of that business logic on the back end, not the front end, if you're the one developing it. — Kapobajza
– Kapobajza, Commented Dec 28, 2020 at 13:25
Thanks for the advice. I needed to combine that arrays for just once because I was doing an "array.map()" in the return of the component, and I wanted to print not only the name of the GP but also wanted to add a image from the country. It's my first web proyect, but I think there should be no problems. — Kevin Buguecio
– Kevin Buguecio, Commented Dec 28, 2020 at 13:35

michael · Accepted Answer · 2020-12-28 13:22:22Z

1

I assumed that raceNameData and raceCountryData array have same length. Used Array.map instead of forEach.

const data = raceNameData.map((race, index) => ({
  raceName: race.gpId,
  raceCountryFlag: raceCountryData[index].gpCountryImage
}));

answered Dec 28, 2020 at 13:22

michael

4,1733 gold badges15 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

React Hook, Array of objects from different call of Axios

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