React-Basics-Kentcdodds/12-state.html at main · MihirModi14/React-Basics-Kentcdodds · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
  <script type="text/babel">
    function Greeting() {
      const [name, setName] = React.useState("");
      const handleChange = (event) => setName(event.target.value);
      return (
        <div>
          <form>
            <label htmlFor="name">Name: </label>
            <input onChange={handleChange} id="name" />
          </form>
          {name ? <strong>Hello {name}</strong> : "Please type your name"}
        </div>
      );
    }

    ReactDOM.render(<Greeting />, document.getElementById("root"));
  </script>
</body>