Expected an assignment or function call and instead saw an expression in React

Posted on by Nathaniel Kirk
Expected an assignment or function call and instead saw an expression

This article will help you learn about the error “Expected an assignment or function call and instead saw an expression”. Let’s read the article to know the reason of this error and how to fix it.

The reason of the error “Expected an assignment or function call and instead saw an expression”

This error will appear when you have a syntax error in writing Javascript code, or it can also be caused by carelessness. As the error warning mentions, you are expected to have a function call instead of an expression. Let’s see the example below to see the case where the error occurs.

Code:

import React from "react";

const App = () => {
    const numbers = [1, 2, 3].map((number) => {
        number + "1";
    });

    return (
        <>
            <h3>The result: {numbers}</h3>
        </>
    );
};

export default App;

Output:

This error was detected by eslint and warned that the program expected an assignment or function call instead of seeing an expression. We have several ways to solve this problem from such information for your reference.

How to fix the error “Expected an assignment or function call and instead saw an expression”?

Add return to the function

Because the program recognizes that you are returning a function expression, it simply means that the function is defined in an expression. Since the function expression is also a value, you can assign it to a variable. Different, and it is not suitable when you use it with a map() function. So we should return to the map, which can run normally, and the error will not appear.

Code:

import React from "react";

const App = () => {
    const numbers = [1, 2, 3].map((number) => {
        return number + "1";
    });

    return (
        <>
            <h3>The result: {numbers}</h3>
        </>
    );
};

export default App;

Output:

The result: 112131

After mapping through the array, the program will add a string and render it to the screen. So the error is gone, and you can code typically. In the above case, we fix it with a map() function, which requires us to return a function call.

Add the eslint statement

Lint is a tool that helps us analyze the code, thereby showing the problems that the code is facing, such as non-compliance with the coding style and wrong coding convention. 

The error appears in the article because it is detected, so we can also prevent it from showing the warning by adding this comment in front of the statement that caused the error.

Code:

import React from "react";

const App = () => {
    const numbers = [1, 2, 3].map((number) => {
        // eslint-disable-next-line no-unused-expressions
        number + "1";
    });

    return (
        <>
            <h3>The result: {numbers}</h3>
        </>
    );
};

export default App;

When you add this comment line in front of the statement that causes the error, the program will no longer detect the error. We can prevent this and make it easier to debug and quickly see other errors on the screen. More console. However, this is only for debugging and only partially solves the problem. Please note this and use it sensibly. Wish you success with the methods mentioned in the article.

Summary

In summary, the article has told you the reason for the error “Expected an assignment or function call and instead saw an expression” and how we can fix it, but I recommend you adjust the change of an assignment or function call to stop this error because it will solve the root of the problem. Good luck for you!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *