Component state switching from function to render component

Question

I am currently trying to use some data that I receive from an api in my render method. I am calling the function in my componentDidMount. Here is the function:

 getDataFromDb = () => {
        axios.get(this.props.urlFromParent + "GetCurrentPods/Device1")
            .then( (res) => {
                this.setState({
                    Pods : res.data
                })
                console.log(this.state.Pods)
            })
 };

and I am calling it in my render method like this

{console.log('hello'+ this.state.Pods)}

here is the console.log outputs:

hello[object Object]
Array [
Object {
    "ParentDeviceID": "Device1",
    "ParentDeviceIsActive": true,
    "PodIsActive": true,
    "PodLocation": 5,
    "PodType": 2,
    "__v": 0,
    "_id": "5d6bfe9c50a6c33006cbd6ac",
},
]

I cant figure out why the state is returning object Object in the render method. Also i am receiving the error: Warning: Cannot update during an existing state transition (such as within render ). Render methods should be a pure function of props and state I'm not sure if this has anything to do with my problem. Thanks for any help.

Answer 1

console.log('hello'+ this.state.Pods)

The above line will convert the object to a string as you are concatenating the string "hello" with an object "this.state.Pods". You should use, or two console statements to logging hello and this.state.Pods differently.