Uncaught Error: Objects are not valid as a React child (found: object with keys {error}). If you meant to render a collection of children, use an array instead.の解決法

はじめに

改修中の学習記録アプリのテスト中に起きた出来事。

問題

入力チェックエラーを表記させようとすると画面が消えてタイトルのエラーが発生した。

解決方法

エラー表記する箇所（error）にタグをつけていなかったのが原因でした。修正すると、入力チェックエラーが表記されました。

修正前

  return (
    isLoading ? (<div>ロード中．．．</div>) : 
    <>   
      <h1>学習記録一覧</h1>
      <ul>
        {/*学習記録を入力*/}
        <div>学習内容<input type="text" value={title} onChange={e => setTitle(e.target.value)}/></div>
        <div>学習時間<input type="number" value={time} onChange={handleInput}/>時間</div>
        <div>入力されている学習内容：<label>{title}</label></div>
        <div>入力されている学習時間：<label>{time}</label>時間</div>
        
        {/*学習記録を表示*/}
        {records.map((record) => (
          <div key={record.id}>
            <label>{record.title} {record.time}時間</label><button onClick={() => handleDelete(record.id)}>削除</button>
          </div>
        ))}

        <button onClick={(e) => handleSubmit(e)}>登録</button>
       
        {error && (
            {error}
        )}
        <div>合計時間：{totalTime}/1000(h)</div>
      </ul>
    </>
  )
}

修正後

return (
    isLoading ? (<div>ロード中．．．</div>) : 
    <>   
      <h1>学習記録一覧</h1>
      <ul>
        {/*学習記録を入力*/}
        <div>学習内容<input type="text" value={title} onChange={e => setTitle(e.target.value)}/></div>
        <div>学習時間<input type="number" value={time} onChange={handleInput}/>時間</div>
        <div>入力されている学習内容：<label>{title}</label></div>
        <div>入力されている学習時間：<label>{time}</label>時間</div>
        {/*学習記録を表示*/}
        {records.map((record) => (
          <div key={record.id}>
            <label>{record.title} {record.time}時間</label><button onClick={() => handleDelete(record.id)}>削除</button>
          </div>
        ))}
        <button onClick={(e) => handleSubmit(e)}>登録</button>
        <div>{error}</div>
        <div>合計時間：{totalTime}/1000(h)</div>
      </ul>
    </>
  )

おわりに

タグの付け忘れには気を付けて今後もじっくりやっていきます。