[Solved] ‘X’ is not defined react/jsx-no-undef

I am facing the following error while using useState: ‘X’ is not defined react/jsx-no-undef in ReactJS. In this Exerror article, We are going to learn about How to reproduce this error and we will discuss All Possible Solutions Lets Get Start with This Article.

How ‘X’ is not defined react/jsx-no-undef Error Occurs?

I am facing the following error while using useState:

'useState' is not defined react/jsx-no-undef

So here I am writing all the possible solutions that I have tried to resolve this error.

How To Solve ‘X’ is not defined react/jsx-no-undef Error?

Solution 1: Import module

This error usually occurs whenever You are trying to use a module that you have not imported. To solve ‘X’ is not defined react/jsx-no-undef this error you need to import that module and your error will be solved.

In My case, I am trying to use useState without importing it So I am facing this error. But when I imported it then my error was solved. Just like this.

import {useState} from 'react';

const App = () => {

  const [count, setCount] = useState(0);

Importing the module will resolve this error and your error must be solved. Thanks.

Solution 2: Don’t import one module twice

Sometimes We are Importing one Module Or Component twice and that’s why this error occurs. In My Case, I have Imported the Header Two times and that’s why I am facing this error.

import Header from './Components/Common/Header';
import Hedaer from './Header';

Removing Extra Import or Renaming it Will resolve your error.

Solution 3: Properly export component

Sometimes Problem is in Your export. If You are Exporting a custom Component then you should know Different types of exports and how to import them. First of all, if you are trying to export default just like below.

export default MyCustomComponent;

Then you need to import default export like this.

import MyCustomComponent from './myCustomComponent';

And if You are not using default exports Just like const or something else.

export const MyCustomComponent = () => { .... }

Then You need to import it inside curly braces Just like this.

import { MyCustomComponent } from './myCustomComponent';

And Now, Your error will be solved.

Conclusion

It’s all About this error. I hope We Have solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

• Uncaught TypeError: Cannot read property ‘pathname’ of undefined
• Error: only absolute urls are supported
• How to use create-react-app with an older React version?
• How to display SVG image in React Component?
• Warning: A component is changing an uncontrolled input of type text to be controlled