react.js useState is not defined

user_15551533 0
Viewed 1578

I use react with links but useState is not defined

    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>


<script type="text/babel">
function App() {
  const [name , setName] = useState('ali');
  const handelClick = () => {
    setName('mahdi')
  }
  return (
  <div className="continer">
    <header>
      <Navbar />
    </header>
    <div className="test">
      <div>{name}</div>
      <button type="button" name="button" onClick={handelClick}> click </button>
    </div>
    <div className="content">
      <Business />
    </div>
  </div>
  )
}

//render components
ReactDOM.render(
  <App />,
  document.getElementById("root")
);

</script>
reactjs javascript
3 Answers

You need to take it from the global React object.

const { useState } = React;
function App() {
  // ...

Same sort of thing for all other hooks.

You also might want to change handelClick to handleClick to avoid confusing yourself.

user_95152070

since you use CDN, you must use it as property of object React like this:

//...

const [name , setName] = React.useState('ali');

//...
user_153048230

If you encountered this problem trying to create a code snippet in StackOverflow like I did then part of the problem is that the latest version in the dropdown at the time of writing is 16.6.3.

The hooks were added in 16.6.1 but they were behind a feature flag and not enabled by default until 16.8.0.

So using:

const { useState } = React;

or:

React.useState(...)

alone will not solve the problem.

Make sure to also use a version >= 16.8.0.

user_3677960
Related