Best way to handle undefined values in ReactJS?

I’m accessing an API with ReactJS. What is the best way to stop React Component crashing when it’s accessing a property in the object provided by the API that may be ‘undefined’?

An example of an error is:

TypeError: Cannot read property ‘items’ of undefined

Answer

It looks like you’re trying to access the property items of a variable x.

And if x is undefined, then calling x.items will give you the error you mentioned.

Doing a simple:

if (x) {
  // CODE here
}

or

if (x && x.items) { // ensures both x and x.items are not undefined
  // CODE here
}

EDIT:

You can now use Optional Chaining, which looks sweet:

if (x?.items)