Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – react.development.js and Uncaught ReferenceError: useState is not defined

I am trying to get some React code to work. I need to work with react.development.js and not React on the server side. I am trying to solve a different issue and I wanted to use useState for that, but this fails.

The start of my page has:

  <head>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

and much of React works. But when I try to use useState, e.g. in:

        const ReminderSet = () => {
            console.log( "Reminderset Rendering");
            const [reminders, setReminders] = useState(defaultReminder);

I get an error in the console, e.g. in Firefox:

Uncaught ReferenceError: useState is not defined
Tags:

2

Answers


  1. 0

    Explanation

    useState isn’t a global, it’s A) a property of the React object, and B) a named export from the react module. I suggest switching to using modules, in which case you can do import { useState } from "react";. But if you don’t want to do that, you can use React.useState or const { useState } = React; and then use useState directly.

    Using modules:

    import React, { useState } from "react";

const Example = () => {
    const [counter, setCounter] = useState(0);
    const increment = () => setCounter((c) => c + 1);
    return (
        <div>
            Count: {counter}{" "}
            <input type="button" value="+" onClick={increment} />
        </div>
    );
};

    Live copy (using Babel standalone, which is why the script tag has an unusual type; don’t use Babel standalone, use a bundler like Vite or Rollup or Webpack [or alternatively, don’t use JSX]):

    <div id="root"></div>

<script type="text/babel" data-presets="es2017,react,stage-3" data-type="module">
import React, { useState } from "https://esm.sh/[email protected]";
import ReactDOM from "https://esm.sh/[email protected]";

const Example = () => {
    const [counter, setCounter] = useState(0);
    const increment = () => setCounter((c) => c + 1);
    return (
        <div>
            Count: {counter}{" "}
            <input type="button" value="+" onClick={increment} />
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

</script>
<script src="https://unpkg.com/[email protected]/runtime.js"></script>
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>

    Not using modules:

    const { useState } = React;

const Example = () => {
    const [counter, setCounter] = useState(0);
    const increment = () => setCounter((c) => c + 1);
    return (
        <div>
            Count: {counter}{" "}
            <input type="button" value="+" onClick={increment} />
        </div>
    );
};

    Live example:

    const { useState } = React;

const Example = () => {
    const [counter, setCounter] = useState(0);
    const increment = () => setCounter((c) => c + 1);
    return (
        <div>
            Count: {counter}{" "}
            <input type="button" value="+" onClick={increment} />
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);
    <div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
    Login or Signup to reply.
  2. 0

    The issue you’re encountering is likely because "useState" is a React hook, and React hooks are only available when you’re using React components. In your case, you’re directly using React functions without defining React components.
    try this:

    const [reminders, setReminders] = React.useState(defaultReminder);

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search