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

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!?

8 thoughts on “Reactjs object data showing undefined even after showing data in console.log”

  1. 555859 95541So, is this just for males, just for ladies, or is it for both sexes If it s not, then do females want to do anything different to put on muscle 863581

    Reply