React JS UNDEFINED Solution | Reactjs Learning | Learn ReactJS & JavaScript Debugging Fast

As a React JS 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
- ReactJS Conditional Rendering
- Async Await Fetch in ReactJS Tutorial
- ReactJS Playground

Thank You!

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

#react #reactjs #undefined #javascript #javascripttutorial #reacttutorial #webdevelopment #webstylepress

[webstylepress]

To watch more related videos, please LIKE, SHARE & SUBSCRIBE! WebStylePress needs your support.

[nguyenhuuanhtuan]

This is exactly all the problems that I had during the time of learning and coding my MERN app, the API worked jusf fine but I always got undefined cuz axios.get was not complete... Your detailed explanations and various solutions help me alot. I can't thank you enough !!

[Drew]

Thanks man. You help me a lot. Greetings from Brazil!

[Younion]

This helped me debug something I've been trying to do for a long time. Ty!

[rijulsarji]

awesome video, solved my problem!!! thanks!!

[BorregosRT]

2 days... many new white hairs... Muchas gracias :*

[LuisGonzalez-yvqi]

This helped a lot thank you!!! But, , ,
Now I get an id issue... 😭
running unit test and now this happens. Any help? links?

[phoenixhacker]

thanks you so much sir i am stuck at it for 3 hours😅

[neerajkanojiya]

Thank you so much, I was looking for this issue.

[nazneenshaikh]

i am having issue while filtering...could you please check

[spraygod]

Im doing same im using array as intialstate still getting undefined after reloading app plsease helpp

[nazneenshaikh]

Unhandled Rejection (TypeError): Cannot read property 'toLowerCase' of undefined

[wom]

Thanks for thevideo, it helped me a lot!

[michaelrooze]

How do you do this if its an object and not an array?