Account for null values when mapping an array ES6

Question

This is I'm mapping an array successfully..

const faculty = props.faculty;

{(faculty.science_department || []).map(science_dep => (
    <div className="row">
        <p>{science_dep.name} : {science_dep.start_date}</p>
    </div>
))}

But what if the array is empty? How can I account for null values/empty states? How can I check within this map function? Ie: show

<p>There are no faculty members within this category</p>

Aaron Beall · Accepted Answer · 2016-05-17 16:17:38Z

1

But what if the array is empty? How can I account for null values/empty states? How can I check within this map function? Ie: show
<p>There are no faculty members within this category</p>

Given those requirements I would first filter the array, then render it with the map if it contains anything, otherwise render the placeholder message:

const {faculty} = this.props;
const science_department = (faculty.science_department || []).filter(dep => !!dep);

{ 
    science_department.length ? science_department.map(science_dep => (
        <div className="row" key={warning.id}>
            <p>{science_dep.name} : {science_dep.start_date}</p>
        </div>)
    : 
        <p>There are no faculty members within this category</p> 
}

PS: What is warning.id? The key should be a field of the science_dep with a unique value.

answered May 17, 2016 at 16:17

Aaron Beall

52.6k26 gold badges91 silver badges109 bronze badges

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

Comments

Yuya · Accepted Answer · 2016-05-17 14:27:35Z

1

Assuming you want to do this within JSX syntax, then you can use the ternary operator:

const faculty = props.faculty;

{
  faculty.science_department.length !== 0 ?    
    faculty.science_department.map(science_dep => (
      <div className="row" key={warning.id}>
        <p>{science_dep.name} : {science_dep.start_date}</p>
      </div>
    ))
  :
    <p>There are no faculty members within this category</p>
}

answered May 17, 2016 at 14:27

Yuya

2,3111 gold badge12 silver badges16 bronze badges

Comments

morels · Accepted Answer · 2016-05-17 14:28:09Z

0

{(faculty.science_department || []).length ? faculty.science_department.map(science_dep => (
<div className="row" key={warning.id}>
    <p>{science_dep.name} : {science_dep.start_date}</p>
</div>
)) : (science_dep => (
<div className="row" key={warning.id}>
    <p>There are no faculty members within this category</p>
</div>)()}

answered May 17, 2016 at 14:28

morels

2,11520 silver badges24 bronze badges

2 Comments

Modelesq Over a year ago

Seems to throw an unexpected token error regarding </div>)()}

morels Over a year ago

do you want to assign the "<div> ..." to a variable or attach it to a dom element ?

Collectives™ on Stack Overflow

Account for null values when mapping an array ES6

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related