TypeError: Cannot read property 'map' of undefined" React

Question

I am new in React , I was following the course of React. And the code as follow appeared issue like "TypeError: Cannot read property 'map' of undefined"; Can anyone tell what's going on ? Thank you so much!

import React, { Component } from 'react'

const ListGroup = props => {
    const {items,textProperty,valueProperty} = props;
    return ( 
      <ul className="list-group">
          {items.map(item =>(
         <li key={item[valueProperty]} className="list-group-item">
             {item[textProperty]}
         </li>
          ))}
          
      </ul>
     );
}
 
export default ListGroup;

That means that the items object hasn't been set (undefined reference). — John
– John, Commented Mar 23, 2021 at 10:29

Pavlo · Accepted Answer · 2021-03-23 10:33:23Z

2

You didn't seem to pass items prop to ListGroup:

<ListGroup items=[] />

Alternatively, you can assign a default value to items:

const {items = [],textProperty,valueProperty} = props;

Or use elvis operator:

items?.map(item => {})

answered Mar 23, 2021 at 10:33

Pavlo

45.2k14 gold badges83 silver badges114 bronze badges

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

3 Comments

Yellow Clock Over a year ago

Hi Pavlo ,thank you so much for your answer ,I had passes the items in my another file as : <ListGroup items={this.setState.genres} textProperty ="name" valueProperty ="_id" onItemSelect={this.handleGenreSelect}/>; state = { movies : [], genres :[], pageSize :4, currentPage : 1 } ; but dosen't work ...

Pavlo Over a year ago

@YellowClock this looks off, you probably want: items={this.state.genres}

Yellow Clock Over a year ago

You got me Pavlo!! Thank you so much!!

Sinan Yaman · Accepted Answer · 2021-03-23 10:29:38Z

1

Your items object is undefined at the start. Just add a null check:

const ListGroup = props => {
    const {items,textProperty,valueProperty} = props;
    return ( 
      <ul className="list-group">
          {items && items.map(item =>(
               <li key={item[valueProperty]} className="list-group-item">
                 {item[textProperty]}
               </li>
          ))}
          
      </ul>
     );
}

answered Mar 23, 2021 at 10:29

Sinan Yaman

5,9562 gold badges20 silver badges40 bronze badges

6 Comments

Yellow Clock Over a year ago

thank you so much ,I am new on posting a question on stack overflow also ..

Sinan Yaman Over a year ago

no problem, if this helped you make sure to accept it as the answer :) happy coding

Sinan Yaman Over a year ago

Why did you unaccept my earlier answer, which works. You can vote up for other helpful answers, but you should accept the earliest working answer. items && items.map and items?.map do the same thing, they execute the map function if items is not falsy

Yellow Clock Over a year ago

Hi Sinan Yaman ,I am so sorry , I didn't notice I unaccepted your answers .I like your anser ,and It works for me .Thank you so much and sorry again ..

Yellow Clock Over a year ago

Thank you so much for your suggestion and understanding ! Now I understand what was going on ... It won't happen more : ) Good day !

|

crispengari · Accepted Answer · 2021-03-23 10:57:34Z

1

You can use operate chaining, change your code to:

const ListGroup = props => {
    const {items,textProperty,valueProperty} = props;
    return ( 
      <ul className="list-group">

          { items?.map(item =>(
               <li key={item[valueProperty]} className="list-group-item">
                 {item[textProperty]}
               </li>
          ))}
          
      </ul>
     );
}
```

edited Mar 23, 2021 at 10:57

answered Mar 23, 2021 at 10:49

crispengari

9,5418 gold badges59 silver badges69 bronze badges

3 Comments

Yellow Clock Over a year ago

Thank you so much for your help Crispen !

crispengari Over a year ago

If you find it Helpful please vote for the answer

Yellow Clock Over a year ago

Hi Crispen ,I had voted , however I recieved "Thanks for the feedback! Votes cast by those with less than 15 reputation are recorded, but do not change the publicly displayed post score." I am not sure it will work ..

T farah · Accepted Answer · 2022-07-25 15:13:23Z

1

I'm taking the same course. Make sure that you have passed the right props to ListGroup in Movies class just like that:

<ListGroup
                items={this.state.genres}
                textProperty="name"
                valueProperty="_id"
                onItemSelect={this.handleGenreSelect}
/>

Regards!

edited Jul 25, 2022 at 15:13

answered Jul 25, 2022 at 15:08

T farah

213 bronze badges

Collectives™ on Stack Overflow

TypeError: Cannot read property 'map' of undefined" React

4 Answers 4

3 Comments

6 Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

6 Comments

3 Comments

Comments

Related