Dealing with an empty array when using .map() in React

Question

I have a React.JS component that will map the notes variable to display.

However, I have run into the problem of having no notes and receiving an error. What is a proper way to approach this?

Here is the code:

import React, {Component} from 'react';


class List extends Component {
    constructor(props){
      super(props);
    }

render(){
  var notes = this.props.items.map((item, i)=>{
      return(
          <li className="listLink" key={i}>
              <p>{item.title}</p>
              <span>{item.content}</span>
          </li>
          )
      });
    return(
      <div className='list'>

          {notes}

      </div>
    );
  }
}

export default List;

Good question I was just wondering the same thing!

boredProjects
– boredProjects

2022-08-31 15:22:57 +00:00
Commented Aug 31, 2022 at 15:22 — boredProjects
– boredProjects, Commented Aug 31, 2022 at 15:22

foundling · Accepted Answer · 2018-03-14 01:42:47Z

50

If you want to render the notes when at least one note exists and a default view when there are no notes in the array, you can change your render function's return expression to this:

return(
  <div className='list'>
      {notes.length ? notes : <p>Default Markup</p>}
  </div>
);

Since empty arrays in JavaScript are truthy, you need to check the array's length and not just the boolean value of an array.

Note that if your items prop is ever null, that would cause an exception because you'd be calling map on a null value. In this case, I'd recommend using Facebook's prop-types library to set items to an empty array by default. That way, if items doesn't get set, the component won't break.

answered Mar 14, 2018 at 1:42

foundling

1,7561 gold badge16 silver badges22 bronze badges

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

1 Comment

Gerardo Bautista Over a year ago

nice move bro !

Anas Ben Yaiche · Accepted Answer · 2021-01-13 11:46:03Z

16

here is the simplest way to deal with

  import React, {Component} from 'react';


class List extends Component {
    constructor(props){
      super(props);
    }

render(){
  var notes = this.props.items?.map((item, i)=>{
      return(
          <li className="listLink" key={i}>
              <p>{item.title}</p>
              <span>{item.content}</span>
          </li>
          )
      });
    return(
      <div className='list'>

          {notes}

      </div>
    );
  }
}

export default List;

just try to add "?" for the array that you maped

answered Jan 13, 2021 at 11:46

Anas Ben Yaiche

3253 silver badges7 bronze badges

3 Comments

Yohan W. Dunon Over a year ago

Hello, can you explain why you add a question mark before the map function?

FFD Over a year ago

@YohanW.Dunon: this is called "optional chaining" -- if "items" (in this case) is undefined or null, the optional chaining (?) will just return undefined instead of throwing an error.

john k Over a year ago

this does not work for me. Maybe because i use webpack to compile my front-end code?

Dimitrij Agal · Accepted Answer · 2018-03-14 04:54:32Z

6

You can just setting a fallback value for the this.props.item

render() {
  const items = this.props.items || [] // if there's no items, give empty array
  const notes = items.map((item, i) => {
  return(
      ....

Doing .map() on empty array will not produces an error, but will return an empty array. Which is fine because empty array is a renderable item in react and won't produce error in render() and will not render the notes as there are no notes provided.

answered Mar 14, 2018 at 4:54

Dimitrij Agal

4452 silver badges9 bronze badges

1 Comment

john k Over a year ago

doesn't work if items is an object. It still says the object exists so does not replace it with a list.

justi · Accepted Answer · 2019-05-23 10:49:48Z

4

In your component, you can set the defaultProps property to set the initial value to your props:

static defaultProps = {
    items: []
};

answered May 23, 2019 at 10:49

justi

4,1162 gold badges22 silver badges24 bronze badges

Collectives™ on Stack Overflow

Dealing with an empty array when using .map() in React

4 Answers 4

1 Comment

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related