Get fetch data in React would get the details and then won't be able to use them as they are undefined

Question

I have a get method and I am trying to fetch the data from my API (already did that to my 4 other pages and works correctly). But here for some reason I get this enter image description here as you can see the data is loaded but then the last line is "undefined mine1 vs opponent2undefined" and it has to be "0 mine1 vs opponent20". Here is my code and it will become clearer:

 if (phase == 2)
        {
            const cookies = new Cookies();
            const url = "http://localhost:7101/GetAllPlayerRounds?userID=" + cookies.get('UserID');
            fetch(url)
                .then((response) => response.json())
                .then((data) => {
                    console.log(data);
                    setRound(data);
                    console.log(data.WPM1 + " mine1 vs opponent2" + data.WPM2)

                    setPhase(3);
                })
        }

I have tried to play with the fetch data but nothing seems to work and the result is always the same. I don't understand why I cannot use the given data. Also tried to set a useState and give that useState the values from the fetch data and use it later on but still the same result...

Answer 1

Based on the image, your data is an array. Either loop through the data or access over the index

console.log(data[0].WPM1 + " mine1 vs opponent2" + data[0].WPM2)