invalid left hand side in assignment expression react ref

Stack Overflow Public questions & answers
Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
Talent Build your employer brand
Advertising Reach developers & technologists worldwide
About the company

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Why I get "Invalid left-hand side in assignment"?

There is code:

I get this error:

Why "&&" is wrong?

ecmascript-6

2 Answers 2

The problem is that the assignment operator, = , is a low-precedence operator, so it's being interpreted in a way you don't expect. If you put that last expression in parentheses, it works:

There seems to be a typo in your code:

result[id] = list[id] should be result[id] == list[id] or result[id] === list[id] (if you're doing a strict comparison)

Your Answer

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service , privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged javascript angularjs ecmascript-6 or ask your own question .

Hot Network Questions

Your privacy

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy .

Get Started

Jan 26, 2017 6:00:03 AM | JavaScript - ReferenceError: invalid assignment left-hand side

Today we examine the invalid assignment error, which is thrown, as the name implies, when code attempts to perform an invalid assignment somewhere.

Next on the list in our extensive JavaScript Error Handling series we're going to examine the Invalid Left-Hand Assignment error in greater detail. The Invalid Left-Hand Assignment error is a sub-object of ReferenceError and is thrown, as the name implies, when code attempts to perform an invalid assignment somewhere.

In this post we'll look at a few code examples to illustrate some common methods of producing an Invalid Left-Hand Assignment error, as well as examine how to handle this error when it rears its ugly head. Let the party begin!

The Technical Rundown

When Should You Use It?

As one of the simplest JavaScript errors to understand, the Invalid Left-Hand Assignment error appears in only a handful of situations in which code is attempting to pass an assignment incorrectly. While this is generally thought of as a syntactic issue, JavaScript defines this particular assignment error as a ReferenceError, since the engine effectively assumes an assignment to a non-referenced variable is being attempted.

The most common example of an Invalid Left-Hand Assignment error is when attempting to compare a value using a assignment operator (=), rather than using a proper comparison operator (== or ===). For example, here we're attempting to perform a basic comparison of the variable name with the values John or Fred. Unfortunately, we've made the mistake of using the assignment operator =, instead of a comparison operator such as == or ===:

try { var name = 'Bob'; if (name = 'John' || name = 'Fred') { console.log(`${name} returns!`) } else { console.log(`Just ${name} this time.`) } } catch (e) { if (e instanceof ReferenceError) { printError(e, true); } else { printError(e, false); } }

Sure enough, rather than giving us an output, the JavaScript engine produces the expected Invalid Left-Hand Assignment error:

It's worth noting that catching an Invalid Left-Hand Assignment error with a typical try-catch block is particular difficult, because the engine parses the code from inside out, meaning inner code blocks are parsed and executed before outer blocks. Since the issue of using a = assignment operator instead of a == comparison operator means the actual structure of the code is changed from the expected, the outer try-catch fails to be parsed and properly executed. In short, this means Invalid Left-Hand Assignment errors are always "raw", without any simple means of catching them.

Another common method for producing an Invalid Left-Hand Assignment error is when attempting to concatenate a string value onto a variable using the addition assignment += operator, instead of the concatenation operator +. For example, below we're attempting to perform concatenation on the name variable on multiple lines, but we've accidentally used the += operator:

try { var name = 'Bob' += ' Smith';

console.log(`Name is ${name}.`); } catch (e) { if (e instanceof ReferenceError) { printError(e, true); } else { printError(e, false); } }

This isn't the syntax JavaScript expects when concatenating multiple values onto a string, so an Invalid Left-Hand Assignment error is thrown:

To resolve this, we simply need to replace += with the concatenation operator +:

try { var name = 'Bob' + ' Smith';

Now we skip the Invalid Left-Hand Assignment error entirely and get our expected output indicating the full name stored in the name variable:

To dive even deeper into understanding how your applications deal with JavaScript Errors, check out the revolutionary Airbrake JavaScript error tracking tool for real-time alerts and instantaneous insight into what went wrong with your JavaScript code.

Written By: Frances Banks

Dec 28, 2016 8:00:56 AM | JavaScript Error Handling - ReferenceError: assignment to undeclared variable “x”

Feb 15, 2017 7:41:35 am | javascript error handling: syntaxerror: "use strict" not allowed in function with non-simple parameters, may 21, 2017 9:00:51 am | javascript errors - syntaxerror: test for equality mistyped as assignment.

[Solved]-Syntax Error: Invalid left-hand side in assignment expression-React Native

Optional chaining should be used when reading the value, not when assigning it. You can update the piece of code to this:

Edit: Mistake pointed out by Felix King

Related Query

More Query from same tag

JavaScript ReferenceError – Invalid assignment left-hand side

This JavaScript exception invalid assignment left-hand side occurs if there is a wrong assignment somewhere in code. A single “=” sign instead of “==” or “===” is an Invalid assignment.

Error Type:

Cause of the error: There may be a misunderstanding between the assignment operator and a comparison operator.

Basic Example of ReferenceError – Invalid assignment left-hand side, run the code and check the console

Example 1: In this example, “=” operator is misused as “==”, So the error occurred.

Example 2: In this example, the + operator is used with the declaration, So the error has not occurred.

Output:

Please Login to comment...

Improve your Coding Skills with Practice

Start your coding journey now.

"Uncaught ReferenceError: Invalid left-hand side in assignment" when building with certain dependencies #45

gnestor commented Nov 30, 2016

👍 1 reaction

blink1073 commented Nov 30, 2016

Sorry, something went wrong.

blink1073 commented Dec 1, 2016

gnestor commented Dec 1, 2016 • edited

Gnestor commented dec 5, 2016.

No branches or pull requests

Invalid left-hand side in assignment in JavaScript [Solved]

Borislav Hadzhiev

Reading time · 2 min

Photo from Unsplash

Invalid left-hand side in assignment in JavaScript [Solved] #

The "Invalid left-hand side in assignment" error occurs when we have a syntax error in our JavaScript code.

The most common cause is using a single equal sign instead of double or triple equals in a conditional statement.

To resolve the issue, make sure to correct any syntax errors in your code.

invalid left hand side in assignment error

Here are some examples of how the error occurs.

Use double or triple equals when comparing values #

The most common cause of the error is using a single equal sign = instead of double or triple equals when comparing values.

The engine interprets the single equal sign as an assignment and not as a comparison operator.

We use a single equals sign when assigning a value to a variable.

However, we use double equals (==) or triple equals (===) when comparing values.

Use bracket notation for object properties that contain hyphens #

Another common cause of the error is trying to set an object property that contains a hyphen using dot notation.

You should use bracket [] notation instead, e.g. obj['key'] = 'value' .

Assigning the result of calling a function to a value #

The error also occurs when trying to assign the result of a function invocation to a value as shown in the last example.

If you aren't sure where to start debugging, open the console in your browser or the terminal in your Node.js application and look at which line the error occurred.

The screenshot above shows that the error occurred in the index.js file on line 25 .

You can hover over the squiggly red line to get additional information on why the error was thrown.

Web Developer

IMAGES

想用短路方式赋值但报错 Invalid left-hand side in assignment？_慕课猿问
Invalid Left Hand Side In Assignment
Invalid Left Hand Side In Assignment
Что означает ошибка ReferenceError: Invalid left-hand side in assignment
Invalid Left Hand Side In Assignment
React成长路之踩坑路 Module build failed: SyntaxError: Invalid left-hand side in assignment expression

VIDEO

Pass Data Without Props in React JS
#1【Python-超常踩到的地雷】賦值表示式 Expression：Assignment
#12 Embedding Expressions
#78 -React Form Validation Hooks
Must Know #react Forms (handling textarea and select) Part-4 #shorts #youtubeshorts #hindi
React js Form Handling

COMMENTS

SyntaxError: invalid assignment left-hand side - JavaScript | MDN
Invalid assignments don't always produce syntax errors. Sometimes the syntax is almost correct, but at runtime, the left hand side expression evaluates to a value instead of a reference, so the assignment is still invalid. Such errors occur later in execution, when the line is actually executed.
Why I get "Invalid left-hand side in assignment"?
The problem is that the assignment operator, =, is a low-precedence operator, so it's being interpreted in a way you don't expect. If you put that last expression in parentheses, it works: for (let id in list) ( (!q.id || (id == q.id)) && (!q.name || (list [id].name.search (q.name) > -1)) && (result [id] = list [id]) ); Share
JavaScript - ReferenceError: invalid assignment left-hand side
Uncaught ReferenceError: Invalid left-hand side in assignment To resolve this, we simply need to replace += with the concatenation operator +:
[Solved]-Syntax Error: Invalid left-hand side in assignment ...
Coding example for the question Syntax Error: Invalid left-hand side in assignment expression-React Native
Invalid left-hand side in assignment · Issue #424 · react-ga ...
i got this error when i try to import this package Invalid left-hand side in assignment !(function webpackMissingModule() { var e = new Error("Cannot find module ...
Destructuring assignment - JavaScript | MDN
In assignment patterns, the pattern does not start with a keyword. Each destructured property is assigned to a target of assignment — which may either be declared beforehand with var or let, or is a property of another object — in general, anything that can appear on the left-hand side of an assignment expression.
JavaScript ReferenceError – Invalid assignment left-hand side
This JavaScript exception invalid assignment left-hand side occurs if there is a wrong assignment somewhere in code. A single “=” sign instead of “==” or “===” is an Invalid assignment. Message: ReferenceError: invalid assignment left-hand side Error Type: ReferenceError
"Uncaught ReferenceError: Invalid left-hand side in ... - GitHub
I'm working on a mimerender extension that depends on react-data-grid. When building the extension for notebook, everything works as expected. However, when building for lab, the webpack builds successfully, but when I load it fails with: Uncaught ReferenceError: Invalid left-hand side in assignment. It points to this line:
Invalid left-hand side in assignment in JavaScript [Solved]
Uncaught ReferenceError: Invalid left-hand side in an assignment at index.js:25 SyntaxError: Invalid left-hand side in assignment at ESMLoader.moduleStrategy ...