React JS UNDEFINED Solution | Reactjs Learning | Learn ReactJS & JavaScript Debugging Fast
Aug 15, 2023
React JS UNDEFINED Solution | Reactjs Learning | Learn ReactJS & JavaScript Debugging Fast
As a React JS developer, have you encountered such errors?https://jsonplaceholder.typicode.com https://reactjs.org/docs/conditional- …https://www.webstylepress.com https://www.facebook.com/webstylepress/ https://twitter.com/webstylepress https://www.instagram.com/webstylepress https://www.linkedin.com/company/webs …https://github.com/webstylepress
Content
6 -> welcome to WebStylePress if you are new
here consider subscribing and hit bell icon
11.68 -> as a react js developer have you encountered such
error like type error cannot read property map of
19.92 -> undefined map is not a function map is not defined
without exception every react just developer makes
29.44 -> this mistake that is trying to display some data
without confirming whether it is available or not
37.76 -> whenever you fetch data or call an api to display
record in react.js components always make sure
46.56 -> that data is stored in state react.js is component
based library in react gs app components get
56.4 -> mounted and unmounted in DOM if a component
that makes an API call gets mounted in DOM
65.76 -> it will take some time for api call to
be processed and for resulting data to be
72.96 -> available to display in component although this
time is in fractions of second but it's enough
80.72 -> for component to throw a warning or error
that it could not find the requested data
87.84 -> solution is simple let's see it practically
this is starter react.js project created by
96.32 -> using create react app let's make an api call
and display records first of all start the app
107.92 -> right click get bash here
113.04 -> yarn start
120.64 -> okay so this is our app
126.48 -> just displaying this text at the moment we will
need to import use state and use effect from react
140.4 -> import
157.28 -> we will need api we will use json
160.56 -> placeholder
176.08 -> let's use users api
183.36 -> users api has got records and each record has got
id and name and this is what we need copy this
194.08 -> url
202.48 -> const url
207.6 -> we will use fetch to make api call
223.6 -> fetch url
229.6 -> dot then
246.48 -> and we will need state to store records
that we are fetching from this api
258.88 -> const data set data use state
276.72 -> this use state was used now
let's use this use effect
308.64 -> inside use effect we will store data in state
315.6 -> in this variable
320.32 -> so this request data
328.64 -> then
332.4 -> data
343.2 -> then set data
348.8 -> data
356 -> so
378.8 -> let's display records now
396.16 -> data dot map
399.84 -> data
421.44 -> and here is data dot name we will also need key
430 -> key will be
434.64 -> data dot id
438.8 -> from data we are extracting id and name
446.32 -> and this data is coming from this state
456.8 -> and here is this error type error
cannot read property map of undefined
480.4 -> basically use effect runs after the
first render is complete in first render
486.8 -> we did not have the data use effect has got
logic logic to fetch data and store it in state
500.16 -> but use effect runs after component is displayed
503.92 -> and we cannot avoid use effect because
all effects must be used in use effect
514.96 -> so here is the problem there are few different
ways to solve this problem one of those ways is
523.36 -> to use initial value use empty array use state
right here use this empty array in this case in
536.08 -> first render of component react.js will see data
as an empty array instead of undefined dot map
546.56 -> this data will be empty
array rather than undefined
556.24 -> and as you can see records are being
displayed now if i refresh the page
566 -> those errors have gone so use empty array
in use state if you don't want to use this
584.88 -> then another solution is to use conditional
rendering if we have data only then render it
596.72 -> use inline if else with conditional operator like
this condition question sign true otherwise false
613.28 -> in other words data sign
624.08 -> or
627.92 -> in case of string like this or
637.12 -> null
642.64 -> or or
653.84 -> loading
658.24 -> all above are same
662.72 -> all of these are same
667.2 -> to apply such logic we will have to
change our jsx a little bit so data
678.32 -> question sign
685.68 -> in other case null
695.12 -> save and you can see the records here
708.48 -> refresh the page and no more errors
719.76 -> instead of null you can also use this or loading
728.56 -> just text loading this text will be
displayed until this thing is available
736.4 -> when it will be available then it will be
displayed and this loading text will disappear or
744.64 -> instead of just this text loading you can create
a loader component and display that here as well
760.08 -> in case you have got a loader component
you can use a component here like this
772.48 -> and if this method is a bit tough
there is an even more easy way to do it
779.2 -> use inline if with logical
and and operator like this
791.12 -> data and end and then here will be the logic
803.92 -> this is also an if statement it says if data is
present then proceed so our code becomes like this
817.36 -> i will comment this
825.2 -> data and and and now this question sign will go
834.48 -> and this null will also go
841.2 -> data and and and then rest of the logic is same
847.84 -> save
853.92 -> refresh no errors you can optimize this code
further like this it will also work save
885.84 -> and it is working
891.12 -> this is easier you can use any method if
you use these two ways of conditional render
898.48 -> you won't need to use empty array
in used state like we did earlier
909.28 -> but keep in mind if conditions become too complex
or some logic is repetitive it's a good idea to
917.12 -> use a separate component for that or you can
also use async await that i have explained
923.68 -> in previous tutorial in fact this tutorial is
based on a guest's request he asked about map
932.24 -> undefined issue so i have created this tutorial i
will show you code for my old tutorial this is the
941.28 -> code from old tutorial in this we are using use
date use effect and in use effect we used get data
950.24 -> async get data and this is our api and we are
using fetch and we stored data here in state
964.48 -> and then we displayed it no
conditional render here but we
972.72 -> used this empty array here so for me it was
working perfectly fine as i can show you that
984.4 -> i will stop the previous app by using
control c i will close this terminal
993.92 -> this is the old code i will
use git bash and yarn start
1005.44 -> and as you can see results here but if i
remove this empty array from the old code
1015.6 -> refresh the page and as you can see the same error
1030.08 -> so in our guest's case he may be using different
code maybe class based components maybe he did
1037.6 -> not use empty array in state in case of
use state or there can be any other reason
1045.04 -> but make sure few things make sure data is in form
of array make sure to use empty array in use state
1058.72 -> make sure to use conditional rendering
1069.44 -> choose this method or this method
1074.56 -> as you like make sure you check data
availability before you render it
1083.68 -> and you can read more about conditional rendering
from react.js docs as well conditional rendering
1123.2 -> and the old tutorial was
related to async await this one
1140.88 -> async await fetch
1146.16 -> i will link this tutorial in video as well
1156.24 -> okay give this video a like subscribe to channel
and press bell icon this will help the channel
1163.36 -> and motivate me to create more videos stay
tuned and i will see you in the next video
Source: https://www.youtube.com/watch?v=0IvxCxcEBPo
