score:32

Accepted answer

When you use scripts, React is exposed on the window object as React, you also use a version of React which doesn't have hooks(hooks were released in 16.8)

Update your scripts to(you might want to use the development scripts for better error messages)

<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>

If you want to access useState destructure it from React or use React.useState

Also, use onChange instead of onClick for input change events as well as using the text value from state as the value of the input

<script type="text/babel">
  const { useState } = React

  const App = (props) => { 
    const [text, setText] = useState('hello');

    return (
      <div>
        <h1>{text}</h1>
        <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      </div>
    );
  }

  const rootElement = document.getElementById('root')
  ReactDOM.render(<App />, rootElement)
</script>

Related Query

More Query from same tag