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

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}
.box {
  width: 300px;
  h1 {
    font-size: 20px;
    margin: 0 0 1rem 0;
  }
}

import React, { useState } from "https://cdn.skypack.dev/[email protected]";
import ReactDOM from "https://cdn.skypack.dev/[email protected]";

const App = () => {
  const [count, setCount] = useState(10);
  const [name, setName] = useState('');
  
  const addOne = () => {
    setCount((prevValue) => prevValue + 1);
    setCount((prevValue) => prevValue + 1);
  };
  
  return(
    <div className="box">
      <p>The count is {count}</p>
      <button onClick={addOne}>Add one</button>
      <hr />
      <p>Your name is {name}</p>
      <button onClick={() => setName('Chris')}>Set name</button>
    </div>
  );
}

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