【React】inputに値や文字が入力できない時の原因と対処法

function App() {
  let inputValue = "";

  const onInputValueChanged = (e) => {
    inputValue = e.target.value;
    console.log(inputValue);
  };
  return (
    <>
      <p>入力された値：{inputValue}</p>
      <input type="text" value={inputValue} onChange={onInputValueChanged} />
    </>
  );
}

export default App;

import { useState } from "react";

function App() {
  const [val, setVal] = useState("");

  const onInputValueChanged = (e) => setVal(e.target.value);
  return (
    <>
      <p>入力された値：{val}</p>
      <input type="text" value={val} onChange={onInputValueChanged} />
    </>
  );
}

export default App;