'ReactJS - Setting state with multiple JSON-objects, keeps returning undefined/non-changed

So I am trying to set the state with the objects in getMatchesByDogId. But Res1 & Res2 keeps returning undefined, and the state only returns the values from initialState (unchanged).

I will be getting data from DB through axios later, and the format looks like this:

{ "body": { "id": 5, "name": "Enya", "gender": "Female" "user": { "id": 3, "firstName": "Tim" } } }

I thought that I might be getting the path wrong when assigned the data in name: res.name, so I tried name: res.body.name, name: res.data.body.name - But none of these solutions were successful. I have researched, although I'm obviously searching for the wrong information.

What am I doing wrong? Thank you.

import React, { Component } from "react";

export default class Matching extends Component{

    constructor(props) {
        super(props);
        this.getMatchesByDogId = this.getMatchesByDogId.bind(this);
        this.state = {
            items: [
                this.initialState
            ]
        }
    };

        initialState = {
            body: {
                name: "Initial",
                gender: "Initial",
                user: {
                    id: "Initial",
                    firstName: "Initial"
                }
            }
        }

    async getMatchesByDogId(){

                const dummyData = [
                    {body: {name: "Enya", gender: "Female",
                            user: {id: 1, firstName: "Tim"}}
                    },
                    {body: {name: "Fido", gender: "Male",
                            user: {id: 1, firstName: "Steve"}}
                    },
                    {body: {name: "Spike", gender: "Male",
                            user: {id: 2, firstName: "Dude"}}
                    },
                    {body: {name: "Lassie", gender: "Female",
                            user: {id: 3, firstName: "Lisa"}}
                    }
                ]

                return dummyData;
    }

    async componentDidMount() {

    console.log("Res1: ", res.data)

        this.getMatchesByDogId().then((res) => {
            this.setState({
                    body : {
                        name: res.name,
                        gender: res.gender,
                        user: {
                            id: res.id,
                            firstName: res.firstName
                        }
                    }
            });

      console.log("Res2: ", res.name)

        })

      console.log("State: ", this.state);

    };
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source