Cannot read property 'length' of undefined react

Question

TypeError: Cannot read property 'length' of undefined

That's what the compiler says when I run my react app. What I do need to do with this?

request = (start,end) => {
   if(this.state.teams.length < 1){
       axios.get(`${ URL }/teams`)
       .then( response => {
           this.setState({
               teams:response.data
           })
       })
   }

    axios.get(`${ URL }/articles?_start=${start}&_end=${end}`)
    .then( response => {
        this.setState({
            items:[...this.state.items,...response.data]
        })
    })
}

I would assume then that you dont have a value for teams. Try checking if this.state.teams has a value. — Cruril
– Cruril, Commented Jul 9, 2018 at 17:50

Hasan Zahran · Accepted Answer · 2020-04-08 07:33:20Z

7

I would suggest to check first if the props is undefined or empty or even declared.

for example:-

    const card = props && props.cards && props.cards.length > 0 ?
        props.cards.map((card, i) => {
            return (
                <card >
            )
        }) : '';

And return your card.

answered Apr 8, 2020 at 7:33

Hasan Zahran

1,46218 silver badges15 bronze badges

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

2 Comments

Hidayt Rahman Over a year ago

This works gratefully, But do we have any generic method to use these flags. because i have 20 place where am using this flag for single component and it makes component lengthy and messy

Hasan Zahran Over a year ago

@HidaytRahman You can do it with useEffect hook to update specific "state/flag" after getting response from the API for example.

Bekah Saugen · Accepted Answer · 2018-07-09 17:55:56Z

4

I would suggest using a check to see if "teams" is undefined before trying to get the length.

if (value === undefined) {
    // value is undefined
}

answered Jul 9, 2018 at 17:55

Bekah Saugen

815 bronze badges

Comments

thomas.winckell · Accepted Answer · 2018-07-09 21:37:31Z

3

Be sure that the teams value of your component's state is initialized with an array value like this :

class MyComponent extends React.Component {

    state: {
      teams: [],
    };
}

answered Jul 9, 2018 at 21:37

thomas.winckell

1,2871 gold badge10 silver badges16 bronze badges

Comments

NearHuscarl · Accepted Answer · 2021-10-30 18:20:49Z

0

Probably because you're having a variable that is supposed to contain an array but is undefined when referencing the length property. Try searching for .length in your editor and create an empty array if it's not initialized:

if ((arr || []).length > 0) {
  // do something
}

// or

if (arr?.length > 0) {
  // do something
}

answered Oct 30, 2021 at 18:20

NearHuscarl

83.1k24 gold badges321 silver badges291 bronze badges

Comments

Chika Nwazuo Evuka · Accepted Answer · 2023-12-30 04:17:31Z

0

This issue happens especially in react or react native, just add a question sign e.g,

{title?.length>20? title?.substring(0,20)+'...':title}

edited Dec 30, 2023 at 4:17

answered Dec 30, 2023 at 4:16

Chika Nwazuo Evuka

512 bronze badges

Collectives™ on Stack Overflow

Cannot read property 'length' of undefined react

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related