Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TypeError: Cannot read property 'map' of null

enter image description here

I couldn't understand why...here is the GitHub repository: https://github.com/Dronrom/React-test

like image 770
Roman Devda Avatar asked Feb 09 '19 18:02

Roman Devda


People also ask

How do you fix TypeError Cannot read properties of null?

To solve the "Cannot read property 'value' of null" error, make sure you aren't accessing the value property on a null value, e.g. a non-existent DOM element. An element with the provided id does not exist in the DOM, so the getElementById method returns null .

Can not read property map of null?

The "cannot read property 'map' of null" error occurs when we call the map() method on a null value, most often when initializing a state variable to null . To solve the error, initialize the value you're mapping over to an empty array.

How do you fix TypeError Cannot read property map of undefined?

The "cannot read property 'map' of undefined" error occurs when we call the map() method on an undefined value, most often when the map method is called before the data from an API request has arrived. To solve the error, initialize the value you're mapping over to an empty array.

What does it mean Cannot read property of null?

The "Cannot read property 'click' of null" error occurs when trying to call the click method on a null value. To solve the error, run the JS script after the DOM elements are available and make sure you only call the method on valid DOM elements.


1 Answers

That’s because you initialized peopleList as null in your component. So map works only on arrays so you need to check peopleList whether its really an array before doing map on it so

Change

   renderItems(arr) {
    return arr.map(({id, name}) => {
        return (
            <li className="list-group-item"
                key={id}
                onClick={() => this.props.onItemSelected(id)}>
                 {name}
            </li>
        );
    });
}

To

  renderItems(arr) {
      if(arr){
            return arr.map(({id, name}) => {
                 return (
                     <li className="list-group-item"
                key={id}
                onClick={() => this.props.onItemSelected(id)}>
                        {name}
                    </li>
                );
            });
         }
      }
like image 87
Hemadri Dasari Avatar answered Oct 06 '22 16:10

Hemadri Dasari