CODEWITHSUNDEEP
javascriptreactjs
Ali Rahmani
Ali Rahmani

Reputation: 51

react.js useState is not defined

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/[email protected]/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>

Upvotes: 5

Views: 4030

Answers (3)

steinybot
steinybot

Reputation: 6124

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.

Upvotes: 0

DSPdav
DSPdav

Reputation: 170

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

//...

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

//...

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 370679

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.

Upvotes: 7

Related Questions