【React】Uncaught Error: Objects are not valid as a React child

はじめに

Reactでイベントに関数をセットする際に発生したエラーについてまとめました

問題

以下、inputタグの onChange イベントにstateのセットを設定しようとすると Uncaught Error: Objects are not valid as a React childというエラーが出ました。

  const [studyContent, setStudyContent] = useState("");
  const changeContent = (value) => {
    setStudyContent(value);
  };
  return (
      <>
          <input value={studyContent} onChange={changeContent} />
          ...
      </>
  );

入力ホームに入力するとタイトルのエラーが出て、画面が真っ白になる

解決方法

ラムダ式で記述し、e.target.value を受け取るようにする。

<input value={studyContent} onChange={(e) => changeContent(e.target.value)}/>

おわりに

イベント時に発生する value の変更は e.target.value で受け取ること

参考