TypeError: Cannot read property 'map' of null

Question

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

Welcome to StackOverflow! Please provide a [mcve] – jo_va Feb 09 '19 at 18:27 — jo_va, Feb 09 '19 at 18:27
you are passing arr as null to renderItems function, – Muhammad Sadiq Feb 09 '19 at 18:29 — Muhammad Sadiq, Feb 09 '19 at 18:29

Hemadri Dasari · Accepted Answer · 2019-02-09T18:47:09.850

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>
                );
            });
         }
      }

score 1 · Answer 2 · answered Feb 09 '19 at 18:44

I think your issue may be that react renders once before componentDidMount(). This is an issue because your calling map on arr which is null. const { peopleList } = this.state; you set people list to your current state which you set as default to be null, state = {peopleList: null}; then you later call this.renderItems(peopleList); which people list is still null at this moment so you are getting the Cannot read property 'map' of null error. I belive something like componentWillMount is what you need instead. I recommend looking at this post which has a similar issue of react life cycle methods. React render() is being called before componentDidMount()

Kai · Answer 3 · 2019-02-09T18:41:29.480

the answer is very simple: the type of the input isn't array type, it might be null or undefined. so that it doesn't have .map function.

How to fix:

Make sure your input must be array type before call renderItems().

    render(){
        const { peopleList } = this.state;


        const items = (peopleList && peopleList.length) ? this.renderItems(peopleList) : null;

        return(
            <ul className="item-list list-group">
                {items}
            </ul>
        );
    }

Or:

Make sure your input must be array type before do mapping:


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

Thank you for your response))) – Roman Devda Feb 09 '19 at 18:43 — Roman Devda, Feb 09 '19 at 18:43

score 0 · Answer 4 · answered Jul 19 '22 at 09:12

0

{product.size?.map(c=>(

                <FilterSizeOption key={c}>{c}</FilterSizeOption>
                ))}

answered Jul 19 '22 at 09:12

Mr S

1

score 0 · Answer 5 · answered Feb 02 '23 at 20:25

Wrapping the return statement with a if statement worked for me

So changed

return (
  <div>
    <Navbar />
    {countries.map((country, i) => {
      return (
        <div>
          <span key={`${country.name.common}${i}`}>
            {country.name.common}
          </span>
        </div>
      );
    })}
  </div>
);

to this

  if (countries) {
return (
  <div>
    <Navbar />
    {countries.map((country, i) => {
      return (
        <div>
          <span key={`${country.name.common}${i}`}>
            {country.name.common}
          </span>
        </div>
      );
    })}
  </div>
);

}

TypeError: Cannot read property 'map' of null

5 Answers5