Expected an assignment or function call and instead saw an expression in ReactJS
Last Updated :
29 May, 2023
In React.js we create components, inside these components, there are functions that we export and then use inside another component by importing it. Sometimes when you try to render that component or use that component as a tag inside another component, It throws an error “React: Expected an assignment or function call and instead saw an expression”.
Let’s see an example by creating a simple React application that throws the same error.
Steps to create a simple React application that just shows the heading “Geeks For Geeks”:
Step 1: Open the terminal and type the following command to create a react app.
npx create-react-app <folder-name>
change the <folder-name> to whatever you want, and press enter.
Step 2: Open the folder inside the code editor, and delete all the files inside the “src” folder except the index.js file.
Step 3: Delete all the files inside the public folder. Don’t worry we will create these files later according to our needs.
Project Structure: We have a simple project structure, we have a package.json & package-lock.json file which contains the details about the module installed inside this project. Then we have node_modules which contains the actual module and an “index.js” file inside “src”, our main server file.
Step 3: Create a file “index.html” inside the “public” folder and write the following code.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
|
This is a basic HTML code, inside we have an “id” root when you open the “index.js” file you will see that the react mount everything to this id everything we do inside our components will show here.
Make sure that your “index.js ” looks like this:
Javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
|
Step 4: By default “index.js” mount the “App.js” component which we just deleted, so let’s create “App.js” components. Components in React.js are nothing but a function that returns HTML tags. Let’s make a function that contains a heading.
Javascript
function App() {
<div>
<h1>Geeks For Geeks</h1>
</div>
}
export default App;
|
Output:
In React components is nothing but a Javascript file that can contain a function, and then inside the function, we can write the HTML code, but in React.js the function should return something so we have to use a return statement, but in Javascript, the return can only have one-liner statements but in our case, we are passing many statements.
<div>
<h1>Geeks For Geeks</h1>
</div>
React expects it to be a valid Javascript function, if it is not then for React it is not a function, so it says “React: Expected an assignment or function call and instead saw an expression”, because It expects a function call and the function which doesn’t return is only an expression to it.
The solution is to use the return keyword and wrap all statements inside a bracket so that they become a one-liner statement for Javascript.
(
<div>
<h1>Geeks For Geeks</h1>
</div>
)
Complete Code:
Javascript
function App() {
return (
<div>
<h1>Geeks For Geeks</h1>
</div>
})
export default App;
|
Output:
Share your thoughts in the comments
Please Login to comment...