JIYIK CN >

React.js error " X is not defined react/jsx-no-undef " occurs when we forget to import a function, class, or variable before using it in our code. To fix the error, make sure to import the value before using it in our code, import {myFunc} from 'my-package'e.g.

// 👉️ forgot to import useState

const App = () => {
  // ⛔️ 'useState' is not defined  no-undef
  // Uncaught ReferenceError: useState is not defined
  const [count, setCount] = useState(0);

  const handleClick = event => {
    setCount(current => current + 1);
  };
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default App;

The problem in the example above is that we forgot to import useStatethe hook before using it.

To resolve the error, we have to import the function.

import {useState} from 'react';

Look at our error message and make sure to import the function that causes the error before using it.

Our error message should contain the name of the function we had to import.

There are two types of imports in ES6 - named imports and default imports.

// 👇️ named import
import {myFunc1} from 'my-package';

// 👇️ default import
import myFunc2 from 'my-package';

Which type of import we have to use to import a function depends on how it is exported.

When we try to import a local file as instead import './myFile'of import myFunction from 'myFile', we often get the " X is not defined error ".

If we get errors when using local members (not from a third-party package), make sure to specify relative paths in the import statements.

// 👇️ named import
import {myFunc1} from './another-file';

// 👇️ default import
import myFunc2 from './another-file';

The above example assumes that we have a file called another-file.js that is located in the same directory as App.js.

Make sure to export the function we are trying to use from another-file.js .

// 👇️ named export
export const myFunc1 = () => {
  console.log('hello world');
}

// 👇️ default export
export default function myFunc2() {
  console.log('hello world');
}

For example, if we need to import from one directory up, we would import as import {myFunc1} from '../another-file'.

After importing all the functions being used, the error will be resolved.