Handling null in ReactJS

Question

I have table, filling from Web - Api.

When I am deleting department, linked to some user. Department object getting null. And I have crash of my react app with such error: TypeError: Cannot read property 'name' of null

I've tried ternary like that, but it didn't help

(typeof user !=='undefined' && typeof user.department.name !=='undefined') ? user.department.name : ''

  refreshList()
    {
       fetch("https://localhost:5001/api/users")
       .then(response=> response.json())
       .then(data=> { 
        this.setState({users:data});
       });
    }

render(){
        const {users, userid, username, userfullname, department} = this.state;
        return(
<tbody>
           {users.map(user=> 
               <tr key = {user.id}> 
               <td>{user.id}</td>
               <td>{user.userName}</td>
               <td>{user.fullName}</td>
               <td>{user.department.name}</td>  <---- here i am getting crash when department is null
               
               
               ....
               )

Check this

Akhilesh
– Akhilesh

2020-05-31 15:12:07 +00:00
Commented May 31, 2020 at 15:12 — Akhilesh
– Akhilesh, Commented May 31, 2020 at 15:12

Victor · Accepted Answer · 2020-05-31 19:57:50Z

1

This is a JavaScript error. If you try to access a property in an object which is null or undefined, you'll get a Type Error. The solution is to validate the data before showing it like this:

<td>{user.department && user.department.name}</td>

edited May 31, 2020 at 19:57

answered May 31, 2020 at 15:07

Victor

1844 bronze badges

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

1 Comment

hoozr Over a year ago

So tricky JS. When we need firstly check the whole .department and only then use data from variable. Thanks!

hendrixchord · Accepted Answer · 2020-05-31 15:06:49Z

1

This will handle undefined and null cases as well.

<td>{user.department && user.department.name || ''}</td>

answered May 31, 2020 at 15:06

hendrixchord

5,5045 gold badges33 silver badges44 bronze badges

Comments

Sennen Randika · Accepted Answer · 2020-05-31 15:10:22Z

1

Please correct your ternary as follows...

{user.department ? user.department.name : ''}

Here, it only checks for user.department.name if and only if user.department is NOT null.

answered May 31, 2020 at 15:10

Sennen Randika

1,6763 gold badges19 silver badges35 bronze badges

Comments

Fatema Tuz Zuhora · Accepted Answer · 2020-05-31 15:15:37Z

0

You need to just validate is the property of the object is undefined or not.

<td>
    {user.department ? user.department.name ? user.department.name :null :null}
</td>

answered May 31, 2020 at 15:15

Fatema Tuz Zuhora

3,8361 gold badge26 silver badges34 bronze badges

Collectives™ on Stack Overflow

Handling null in ReactJS

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related