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

by

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.

Leave a Comment