Cannot read property 'length' of undefined in reactjs

Question

Trying to show the length of the data that is received from api response.but it say cannot read property of undefined


async  componentDidMount() {
        Users.getAppAuthUser(1,true).then((res)=>{
            this.setState({data:res});
            this.setState({loading:false});
        })
        console.log(this.state.data);

}
render() {
    return (
         <div >                    
            <span >({  this.state.data ===[] ?    0 :  this.state.data.accounts.length })
            </span>
        </div>
    )
}

Your first render is happening even before data is loading from promise. You can safeguard it by checking if this.state.data exists. — Sandip Nirmal
– Sandip Nirmal, Commented Sep 19, 2019 at 4:44

AvadaKedavra · Accepted Answer · 2019-09-19 04:09:09Z

2

I think what you can do is

<div>
{ this.state.data && <span> {{this.state.data.length}} </span> }
</div>

answered Sep 19, 2019 at 4:09

AvadaKedavra

291 silver badge3 bronze badges

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

Comments

Non · Accepted Answer · 2019-09-19 04:23:45Z

Sometimes it could happen because while the rendering is processing, the state is not done yet so it won't get the whole properties of the keys inside the state. In this case it hasn't finished loading data so length is not available.

async before componentDidMount is not valid here.

state = {
  data: [], loading: false
}

componentDidMount() {
    Users.getAppAuthUser(1, true).then((res)=> ({
        this.setState({data: res, loading:false});
    }))
}

render() {
    return (
        <div>                    
            {this.state.data && <span>{this.state.data.accounts.length}</span>}
        </div>
    )
}

If this line doesn't work {this.state.data && <span>{this.state.data.accounts.length}</span>} do this instead:

{this.state.data && this.state.data.accounts && <span>{this.state.data.accounts.length}</span>}

If you using lodash you may import get:

import get from 'lodash.get';

...

<div>                    
  <span>{get(this.state, 'data.accounts.length', null)}</span>
</div>

Dostonbek Oripjonov · Accepted Answer · 2019-09-19 04:39:29Z

0

The reason to why u r getting undefined is not proper usage of async/await. Read to get more info bro

    async componentDidMount() {
        const response = await fetch(`https://api.coinmarketcap.com/v1/ticker/?limit=10`);
        const json = await response.json();
        this.setState({ data: json });
    }

You should use it like this

edited Sep 19, 2019 at 4:39

answered Sep 19, 2019 at 4:33

Dostonbek Oripjonov

1,6941 gold badge21 silver badges30 bronze badges

Collectives™ on Stack Overflow

Cannot read property 'length' of undefined in reactjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related