Array.map returns cannot read property map of null

Question

I want to display a list of elements I have in Json.

json is for example:

[{"res": "1030-1130"},{"res": "1200-1400"},{"res": "1800-1930"}]

my code is :

render () {
    const items = this.state.JsonList.map(item => <li>{item.res}</li> );
    return (
      <div>
        <ul>
          {items}
        </ul>
      </div>

But I have the error TypeError: Cannot read property 'map' of null

But if I make a console.log of this.state.JsonList it is not empty and returns:

0: {res: "1030-1130"} 1: {res: "1200-1400"} 2: {res: "1800-1930"}

Do you know how to solve it ?

Is that JsonList an Array? Could you please paste the console.log result? Thanks — tarabor
– tarabor, Commented May 19, 2019 at 13:25
@tarabor : yes it is an array. I edited the answer to complete — droledenom
– droledenom, Commented May 19, 2019 at 13:29
try const items = JSON.parse(this.state.JsonList).map(item => <li>{item.res}</li> ); — Max Svidlo
– Max Svidlo, Commented May 19, 2019 at 13:33

Dimitri Kopriwa · Accepted Answer · 2019-05-19 13:45:14Z

You need to fix your example:

render () {
  // never use upper case to store an array, try to change that as earliest as possible
  const { JsonList: jsonList } = this.state; 
  const items = jsonList.map((item) => <li key={item.res}>{item.res}</li> );
  return (
    <div>
      <ul>
        {items}
      </ul>
    </div>
  );
}

map is a method of array, if you doubt that your value is an array, you can do as follow:

  const items = [...jsonList].map(item => <li key={item.res}>{item.res}</li>);

The console.log seems to show that it is not an array, try also to log it's type

 console.log(jsonList instanceof Array); // should return true
 console.log(typeof jsonList); // should be array not a string

If it's a string, don't forget to JSON.parse:

JSON.parse(jsonList).map((item) => <li key={item.res}>{item.res}</li>);

In the end, if your value is null during initialization of your component, you can do:

  const { JsonList: jsonList = [] } = this.state; 
  // or instead doing this in render, do it during state initialization

Note that TypeError: Cannot read property 'map' of null is an explicit error when we try to access .map on null.

Joseph · Accepted Answer · 2019-05-19 13:43:25Z

1

you are facing this issue because this.state.JsonList is null during the render method call, to solve this

render() {
 const { JsonList: jsonList = [] } = this.state; // if the jsonList is empty it will have default empty array value, hence null value error will not occur
 const items = jsonList.map(item => <li>{item.res}</li> );
 return (
   <div>
      <ul>
        {items}
      </ul>
    </div>
 );  
}

hope this helps!!

answered May 19, 2019 at 13:43

Joseph

6925 silver badges17 bronze badges

Comments

HamzaMushtaq · Accepted Answer · 2019-05-19 13:53:43Z

0

you can use a reduce function as well instead of map

'var jsonlist= [{"res": "1030-1130"},{"res": "1200-1400"},{"res": "1800-1930"}];

function appendlist(total, num) {
  return total + '<li>' + num.res + '</li><br>';
}

function render(item) {
   return jsonlist.reduce(appendlist);
}'

answered May 19, 2019 at 13:53

HamzaMushtaq

1,87018 silver badges14 bronze badges

Collectives™ on Stack Overflow

Array.map returns cannot read property map of null

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