How to handle calling functions on data that may be undefined?

by

Check the array before using map:

arr && arr.map()

OR,

arr && arr.length && arr.map() // if you want to map only if not empty array

OR,

We can even use like this (as commented by devserkan):

(arr || []).map()

As per your comment:

I wish there was a safe navigation operator like with C# (arr?.map())

Yes, obviously. This is called optional chaining in JavaScript which is still in proposal. If it is accepted, then you may use like this:

arr?.map()

You can see it in staging 1 for which you may use babel preset stage1

But obviously, except the checking array length, your requirement will not be fulfilled:

This results in an error because, of course, the first index of the array is undefined.

So, I suggest you to use:

arr && arr.length && arr.map()

More Related Contents:

  1. Handle response – SyntaxError: Unexpected end of input when using mode: ‘no-cors’
  2. React ‘cannot read property of undefined’ when using map
  3. How can I communicate between related react components?
  4. When to use functional setState
  5. How to pass data from a page to another page using react router
  6. How to call loading function with React useEffect only once
  7. Applying className/onClick/onChange not working on Custom React Component
  8. How to use componentWillMount() in React Hooks?
  9. How to access custom attributes from event object in React?
  10. this.setState isn’t merging states as I would expect
  11. How do you Hover in ReactJS? – onMouseLeave not registered during fast hover over
  12. Uncaught Error: Invariant Violation: findComponentRoot(…, …$110): Unable to find element. This probably means the DOM was unexpectedly mutated
  13. I am getting error in console “You need to enable JavaScript to run this app.” reactjs
  14. Error: How to serialize data from getStaticProps : Next.js
  15. Update one of the objects in array, in an immutable way
  16. How to Set port in next.js
  17. What does useCallback/useMemo do in React?
  18. How to hide bottom navigation bar on a specific screen in react native?
  19. Use Object.assign or Spread Operator in React/Redux? Which is a better practise
  20. Do we still need functional setState way in react hooks?
  21. stop dragging after a limit has reached
  22. Equivalent to componentDidUpdate using React hooks
  23. How to Call a Function inside a Render in React/Jsx
  24. reactjs event listener beforeunload added but not removed
  25. Browser Detection in ReactJS
  26. React – Dynamically Import Components
  27. passing data from child to parent component – react – via callback function
  28. FastAPI is not returning cookies to React frontend
  29. React Functional component: calling as function vs. as component
  30. Enzyme simulate an onChange event

Leave a Comment