"codepen.io"에서 테스트
JavaScript Preprocessor을 Babel로 설정하지않으면 실행되지않음

HTML

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

JS

import React, { useState } from "https://esm.sh/react";
import ReactDOMClient from "https://esm.sh/react-dom/client";
const a = ReactDOMClient.createRoot(document.querySelector("#root"));

onSubmit받아서 값 수정

function App() {
  var [string, setString] = useState("감자");
  const getSubmit = (e) => {
    e.preventDefault();
    const form = e.target;
    setString(form.content.value);
  };
  return (
    <div>
      <form onSubmit={getSubmit}>
        <input name="content" type="text" palceholder="할일" />
        <input type="submit" palceholder="작성" />
      </form>
      <div>{string}</div>
    </div>
  );
}
a.render(<App />);

결과: