Reactjs object data showing undefined even after showing data in console.log

Question

When i run this code, it should render

Hello World!

But it render,

Loading...

Here is my code:

import React, { Component } from 'react';

class GroupsHomePage extends Component {
    constructor() {
        super()
        this.state={
            groupInfo:[]
        }
    }
    componentDidMount(){
        let store = JSON.parse(localStorage.getItem('login'))
        var url = 'http://127.0.0.1:8000/myapi/groupsdata/'+this.props.groupId+'/?format=json'
        fetch(url,{
            method:'GET',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Token '+store.token,
            },
        })
        .then(res=>res.json().then(result=>{
            this.setState({groupInfo: result})
        }))
    }
    render() {
        console.log(this.state.groupInfo)
        if(this.state.groupInfo.length){
            return (
                <div>
                     <p>Hello World!</p>
                </div>
            );
        }else{
            return(
                <div className='container'>
                    <p>Loading...</p>
                </div>
            )
        }
        
    }
}

export default GroupsHomePage;

When i run the code, in console it shows:

[ ]

{id: 6, name: "ffff", member: 0, admin: {id: 7, first_name: "test6", last_name: "test6"}}

why it shows Loading... instead of Hello World!?

David Fernández Ortiz · Accepted Answer · 2021-01-31 17:40:55Z

1

You are checking if "groupInfo" has the length property. This property is usually associated to an array or a string type. In this case, I think "groupInfo" is an object type, so it doesn't have this length property. I suggest to change the condition and check if "groupInfo" has the id property for example:

if (this.state.groupInfo.id) {
   ...
}

Another approach could be to convert that object in an array and check for its length, like this:

if (Object.keys(this.state.groupInfo).length) {
   ...
}

answered Jan 31, 2021 at 17:40

David Fernández Ortiz

7334 silver badges7 bronze badges

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

Comments

Sanoodia · Accepted Answer · 2021-01-31 17:45:36Z

1

So firstly your default groupInfo state should be an empty object in constructor like this groupInfo:{}

And to check length your 'if' condition would be this

if(Object.keys(this.state.groupInfo).length > 0)

This condition is used for JSON object keys different from Array

answered Jan 31, 2021 at 17:45

Sanoodia

9254 silver badges9 bronze badges

Comments

Rajan Lagah · Accepted Answer · 2021-01-31 17:35:38Z

0

Try this. console.log(typeof(this.state.groupInfo))

I think groupInfo is of object type.

So in console if you see the output of above line object then change the if condition to

        if(this.state.groupInfo){

Also you should not use

if(this.state.groupInfo.length){

if you have groupInfo already defined as []. Because it will give you true and i think you only want to run this if condition when you have some data in groupInfo array.

if(this.state.groupInfo.length !== 0){

Is good way

answered Jan 31, 2021 at 17:35

Rajan Lagah

2,5381 gold badge28 silver badges46 bronze badges

Comments

Filip Seman · Accepted Answer · 2021-01-31 17:38:55Z

0

Looks ok, the API might lie to you...

Before you check length

if(this.state.groupInfo.length){
    ...
}

make sure the structure groupInfo is array of objects.

answered Jan 31, 2021 at 17:38

Filip Seman

1,8442 gold badges23 silver badges30 bronze badges

Collectives™ on Stack Overflow

Reactjs object data showing undefined even after showing data in console.log

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related