Visual Composer Cannot Read Property 'removeclass' of Undefined
Got an error like this in your React component?
Cannot read property `map` of undefined
In this post nosotros'll talk well-nigh how to fix this 1 specifically, and along the way you lot'll learn how to approach fixing errors in full general.
We'll cover how to read a stack trace, how to interpret the text of the error, and ultimately how to fix it.
The Quick Fix
This fault commonly means you're trying to apply .map on an array, simply that array isn't defined nevertheless.
That's often because the array is a piece of undefined state or an undefined prop.
Make sure to initialize the state properly. That ways if it will eventually be an assortment, employ useState([]) instead of something like useState() or useState(cipher).
Let'due south look at how we can translate an error message and rails down where it happened and why.
How to Observe the Error
Commencement social club of business is to figure out where the error is.
If you're using Create React App, it probably threw upwards a screen like this:
TypeError
Cannot read property 'map' of undefined
App
vi | render (
7 | < div className = "App" >
8 | < h1 > List of Items < / h1 >
> 9 | {items . map((item) => (
| ^
10 | < div cardinal = {item . id} >
xi | {item . name}
12 | < / div > Expect for the file and the line number starting time.
Hither, that's /src/App.js and line 9, taken from the calorie-free gray text to a higher place the code block.
btw, when you run into something like /src/App.js:nine:13, the way to decode that is filename:lineNumber:columnNumber.
How to Read the Stack Trace
If you're looking at the browser console instead, you'll need to read the stack trace to figure out where the error was.
These e'er wait long and intimidating, just the trick is that usually you lot tin ignore almost of it!
The lines are in order of execution, with the most recent first.
Here'south the stack trace for this error, with the only important lines highlighted:
TypeError: Cannot read property 'map' of undefined at App (App.js:ix) at renderWithHooks (react-dom.development.js:10021) at mountIndeterminateComponent (react-dom.development.js:12143) at beginWork (react-dom.development.js:12942) at HTMLUnknownElement.callCallback (react-dom.development.js:2746) at Object.invokeGuardedCallbackDev (react-dom.development.js:2770) at invokeGuardedCallback (react-dom.development.js:2804) at beginWork $1 (react-dom.development.js:16114) at performUnitOfWork (react-dom.development.js:15339) at workLoopSync (react-dom.evolution.js:15293) at renderRootSync (react-dom.development.js:15268) at performSyncWorkOnRoot (react-dom.development.js:15008) at scheduleUpdateOnFiber (react-dom.evolution.js:14770) at updateContainer (react-dom.development.js:17211) at eval (react-dom.development.js:17610) at unbatchedUpdates (react-dom.development.js:15104) at legacyRenderSubtreeIntoContainer (react-dom.development.js:17609) at Object.render (react-dom.development.js:17672) at evaluate (alphabetize.js:7) at z (eval.js:42) at G.evaluate (transpiled-module.js:692) at exist.evaluateTranspiledModule (manager.js:286) at exist.evaluateModule (manager.js:257) at compile.ts:717 at l (runtime.js:45) at Generator._invoke (runtime.js:274) at Generator.forEach.eastward. < computed > [as next] (runtime.js:97) at t (asyncToGenerator.js:3) at i (asyncToGenerator.js:25) I wasn't kidding when I said you could ignore nearly of it! The kickoff two lines are all we care near here.
The first line is the mistake message, and every line later on that spells out the unwound stack of function calls that led to information technology.
Allow's decode a couple of these lines:
Here nosotros have:
-
Appis the name of our component office -
App.jsis the file where it appears -
9is the line of that file where the fault occurred
Permit's expect at another one:
at performSyncWorkOnRoot (react-dom.development.js:15008) -
performSyncWorkOnRootis the proper noun of the function where this happened -
react-dom.development.jsis the file -
15008is the line number (it'south a large file!)
Ignore Files That Aren't Yours
I already mentioned this only I wanted to state it explictly: when you're looking at a stack trace, you can almost ever ignore whatever lines that refer to files that are exterior your codebase, like ones from a library.
Usually, that ways you'll pay attention to just the first few lines.
Scan down the list until it starts to veer into file names you don't recognize.
There are some cases where you do care about the total stack, only they're few and far between, in my experience. Things similar… if you suspect a bug in the library you're using, or if you retrieve some erroneous input is making its way into library lawmaking and blowing up.
The vast bulk of the fourth dimension, though, the bug volition be in your ain lawmaking ;)
Follow the Clues: How to Diagnose the Error
So the stack trace told united states of america where to expect: line 9 of App.js. Let's open up that upwardly.
Hither'southward the full text of that file:
import "./styles.css" ; consign default role App () { let items ; return ( < div className = "App" > < h1 > List of Items </ h1 > { items . map ( item => ( < div fundamental = { detail .id } > { detail .name } </ div > )) } </ div > ) ; } Line 9 is this one:
And just for reference, here'southward that fault bulletin again:
TypeError: Cannot read property 'map' of undefined Let'due south pause this downward!
-
TypeErroris the kind of error
There are a scattering of congenital-in error types. MDN says TypeError "represents an mistake that occurs when a variable or parameter is not of a valid type." (this part is, IMO, the to the lowest degree useful function of the error bulletin)
-
Cannot read propertymeans the code was trying to read a belongings.
This is a proficient clue! There are only a few means to read properties in JavaScript.
The well-nigh mutual is probably the . operator.
As in user.proper noun, to admission the proper name property of the user object.
Or items.map, to access the map holding of the items object.
At that place's likewise brackets (aka foursquare brackets, []) for accessing items in an array, similar items[5] or items['map'].
You lot might wonder why the error isn't more specific, like "Cannot read function `map` of undefined" – but remember, the JS interpreter has no idea what we meant that type to be. Information technology doesn't know it was supposed to be an array, or that map is a function. It didn't get that far, because items is undefined.
-
'map'is the property the lawmaking was trying to read
This one is another bang-up clue. Combined with the previous bit, you can be pretty certain y'all should exist looking for .map somewhere on this line.
-
of undefinedis a clue most the value of the variable
It would be manner more useful if the mistake could say "Cannot read belongings `map` of items". Sadly it doesn't say that. It tells you the value of that variable instead.
So now you can piece this all together:
- find the line that the error occurred on (line 9, here)
- browse that line looking for
.map - look at the variable/expression/whatever immediately before the
.mapand be very suspicious of it.
Once you know which variable to look at, you can read through the office looking for where information technology comes from, and whether information technology's initialized.
In our little example, the only other occurrence of items is line 4:
This defines the variable but information technology doesn't set it to annihilation, which ways its value is undefined. In that location'south the problem. Fix that, and you set the mistake!
Fixing This in the Real World
Of course this case is tiny and contrived, with a simple error, and it's colocated very shut to the site of the fault. These ones are the easiest to fix!
There are a ton of potential causes for an error like this, though.
Maybe items is a prop passed in from the parent component – and you forgot to pass information technology down.
Or maybe y'all did pass that prop, but the value being passed in is really undefined or nil.
If it'due south a local country variable, maybe you lot're initializing the state every bit undefined – useState(), written similar that with no arguments, volition practise exactly this!
If it'southward a prop coming from Redux, maybe your mapStateToProps is missing the value, or has a typo.
Whatever the case, though, the process is the same: commencement where the error is and work backwards, verifying your assumptions at each point the variable is used. Throw in some panel.logsouth or use the debugger to inspect the intermediate values and figure out why it's undefined.
Y'all'll get it stock-still! Good luck :)
Success! Now cheque your email.
Learning React tin can be a struggle — so many libraries and tools!
My advice? Ignore all of them :)
For a stride-by-pace approach, check out my Pure React workshop.
Learn to think in React
- 90+ screencast lessons
- Full transcripts and closed captions
- All the code from the lessons
- Developer interviews
Start learning Pure React at present
Dave Ceddia'due south Pure React is a work of enormous clarity and depth. Hats off. I'm a React trainer in London and would thoroughly recommend this to all front end devs wanting to upskill or consolidate.
Alan Lavander
@lavenderlens
Source: https://daveceddia.com/fix-react-errors/
0 Response to "Visual Composer Cannot Read Property 'removeclass' of Undefined"
Post a Comment