I am returning a list of 2 objects from my API and have used a fetch in the profile component successfully to set the state of userStats to be this JSON object:

[{"userStatsId":1,"victories":0,"draws":0,"defeats":0},{"userStatsId":2,"victories":0,"draws":0,"defeats":0}]

This is also what prints in console in the code below, so the state is definitely set correctly and passed into the render method.

Previously I was being returned JSON objects containing those UserStat objects and I was accessing the values using:

<td className="player-list-key-number">{user.userStats[0].victories}</td>

So I just assumed now that I am simply returning the list of the 2 UserStat objects logically I should just do:

<h3 id="stats">Stats</h3>
                        <CardGroup>
                        <Card className="stat-card">
                            <CardImg></CardImg>
                            <CardTitle>Total Victories</CardTitle>
                            <CardText className="victory-text">{userStats[0].victories}</CardText>
                        </Card>

Etc...

However, this causes an error:

Uncaught TypeError: Cannot read properties of undefined (reading 'victories')

In Profile component:

render() { const {user, profileImage, userStats, isLoading} = this.state;

        console.log(this.props.location);
        console.log("USER:");
        console.log(user);

        console.log("USERSTATS:");
        console.log(userStats);


        if (isLoading) {
            return <p>Loading...</p>;
        }

        return (

<h3 id="stats">Stats</h3>
                            <CardGroup>
                            <Card className="stat-card">
                                <CardImg></CardImg>
                                <CardTitle>Total Victories</CardTitle>
                                <CardText className="victory-text">{userStats[0].victories}</CardText>
                            </Card>
                            <Card className="stat-card">
                                <CardTitle>Total Defeats</CardTitle>
                                <CardText className="defeats-text"></CardText>
                            </Card>
)

How can I access these values now they are not in outer User object?

Thanks