How to Prevent TypeError Cannot Read Property Map of undefined | Fix Undefined in React JS

Описание: As a React JS developer or javascript developer, have you encountered such errors?

TypeError: Cannot read property 'map' of undefined
Map is not a function
Map is not defined

Without exception, every React JS developer makes this mistake. That is, trying to display some data without confirming whether it's available or not. Whenever you fetch data or call an API to display record in React JS components, always make sure data is stored in state. React JS is component based library.

In React JS app, components get mounted and unmounted in DOM. If a component that makes an API call, gets mounted in DOM, it will take some time for API call to be processed and for resulting data to be available to display in component. Although this time is in fractions of a second but it's enough for component to throw a warning or error that it could not find the requested data. Solution is simple. Check data availability before displaying it. Use empty array as default initial state or use conditional rendering in ReactJS.

I created ReactJS app by using create-react-app. I am using JsonPlaceholder for API. I am using fetch for API call and displaying records in app. Then I will show how can you avoid that 'map undefined' error by using multiple ways.

Basically, useEffect runs after the first render is complete. In first render we don't have the data. useEffect has logic to fetch data and store it in state but useEffect hook runs after component is displayed. And We can not avoid useEffect, because all effects must be used in useEffect.

1- Make sure data is in form of array
2- Make sure to use empty array in useState as initial state
3- Make sure to use conditional rendering in ReactJS
4- Make sure you check data availability before you display it

If you are working with React Native, same solution will apply there also.

JSON Placeholder
https://jsonplaceholder.typicode.com
ReactJS Conditional Rendering
https://reactjs.org/docs/conditional-...
Async Await Fetch in ReactJS Tutorial
   • Async Await Fetch Data from API in React J...  
ReactJS Playground
   • Run Multiple React Apps in One Project at ...  

Thank You!

Channel Support
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

Channel:    / webstylepress  
Website: https://www.webstylepress.com
FaceBook:   / webstylepress  
Twitter:   / webstylepress  
Instagram:   / webstylepress  
LinkedIn:   / webstylepress  
GitHub: https://github.com/webstylepress
#react #reactjs #undefined #javascript #javascripttutorial #reacttutorial #webdevelopment #webstylepress