Best way to handle null values in ReactJS?
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)
- In simple function you do it simply by if statement.
if(typeof x !=='undefined' && typeof x.item !=='undefined'){
}- in JSX you do it in this way.
render(){
return(
<div>
(typeof x !=='undefined' && typeof x.item !=='undefined')?
<div>success</div>:
<div>fail</div>
</div>
)
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>This post talks about a few error handling strategy in your react app.
But in your case, I think using try-catch clause would be the most convenient.
let results;
const resultsFallback = { items: [] };
try {
// assign results to res
// res would be an object that you get from API call
results = res.items;
// do stuff with items here
res.items.map(e => {
// do some stuff with elements in items property
})
} catch(e) {
// something wrong when getting results, set
// results to a fallback object.
results = resultsFallback;
}I assume that you are using this only for one particular pesky react component. If you want to handle similar type of error, I suggest you use ReactTryCatchBatchingStrategy in the blog post above.