Reactのコンポーネント機能を使ってテーブルを表示するためには自分のコードをどのように修正すれば良いでしょうか？

Question

いつもお世話になっています。
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

---

【質問の主旨】

Reactのコンポーネント機能を使って下記のテーブルを作成したいと考えています。

ですが自分が書いたコードでは、下記の通りテーブルの内容が表示されません。

自分のコードをどのように修正すれば、テーブルの内容が表示されるようになるでしょうか？

【質問の補足】

1. 見本となるReactのコードについて

【質問の主旨】で1枚目の画像で表されたテーブルは、主にこちらのコードを見本としています。

2. 見本となるコードの修正について

ただし、【質問の補足】の1で示したコードをそのまま使うと、Warning: ReactDOM.render is supported in React 18. というエラーが表示されますので、
Reactのドキュメントに基づいて修正をしています。

3. 自分が書いたコード

【質問の補足】の1と2を踏まえた上で、自分が書いたReactのコードはGithubにアップしています。その中でもテーブルの内容に関するTable.jsは以下の通りです。

import React, {Component} from 'react'

const TableHeader = () => {
  return (
    <thead>
      <tr>
        <th>Name</th>
        <th>Job</th>
        <th>Remove</th>
      </tr>
    </thead>
  )
}

const TableBody = props => {
  const rows = props.characterData?.map((row, index) => {
    return (
      <tr key={index}>
        <td>{row.name}</td>
        <td>{row.job}</td>
        <td>
          <button onClick={() => props.removeCharacter(index)}>Delete</button>
        </td>
      </tr>
    )
  })
  return <tbody>{rows}</tbody>
}

const Table = (props) => {
  const {characterData, removeCharacter} = props

  return (
    <table>
      <TableHeader />
      <TableBody characterData={characterData} removeCharacter={removeCharacter} />
    </table>
  )
}

export default Table;

---

以上、ご確認をよろしくお願いします。

Comments

[退会済みユーザー]

質問者さん、無言ですか、回答がでているのでそれら対するフィードバックを書いてください。役に立った/立たなかったぐらいはすぐにでも返事できるのでは。役に立たなかったならどこがダメかを書くとより期待に近い回答だ出てくるかも。とにかく無言で放置は NG です。

[echizeyayota]

SurferOnWww さん。コメントありがとうございます。
質問をしたのち所用があったため、しばらくの間コメントができませんでした。
まことに恐れ入ります。

[退会済みユーザー]

yoshiokatsuneoさんの回答で解決できたのであれば、その回答にベストアンサーを付けてこのスレッドはクローズしてください。

[echizeyayota]

SurferOnWww さん。
コメントありがとうございます。
yoshiokatsuneoさんの回答をベストアンサーにして、今回の質問をクローズ（解決済み）にしました。
今後ともどうぞよろしくお願いします。

Answer 1

質問者さんのケースで参考になるかどうかわかりませんが、Visual Studio 2022 のテンプレートで生成されるプロジェクトで以下のようなテーブルを表示するものがありますので、そのコードを紹介しておきます。

import React, { Component } from 'react';

export class FetchData extends Component {
    static displayName = FetchData.name;

    constructor(props) {
        super(props);
        this.state = { forecasts: [], loading: true };
    }

    componentDidMount() {
        this.populateWeatherData();
    }

    static renderForecastsTable(forecasts) {
        return (
            <table className='table table-striped' aria-labelledby="tabelLabel">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Temp. (C)</th>
                        <th>Temp. (F)</th>
                        <th>Summary</th>
                    </tr>
                </thead>
                <tbody>
                    {forecasts.map(forecast =>
                        <tr key={forecast.date}>
                            <td>{forecast.date}</td>
                            <td>{forecast.temperatureC}</td>
                            <td>{forecast.temperatureF}</td>
                            <td>{forecast.summary}</td>
                        </tr>
                    )}
                </tbody>
            </table>
        );
    }

    render() {
        let contents = this.state.loading
            ? <p><em>Loading...</em></p>
            : FetchData.renderForecastsTable(this.state.forecasts);

        return (
            <div>
                <h1 id="tabelLabel" >Weather forecast</h1>
                <p>This component demonstrates fetching data from the server.</p>
                {contents}
            </div>
        );
    }

    async populateWeatherData() {
        const response = await fetch('weatherforecast');
        const data = await response.json();
        this.setState({ forecasts: data, loading: false });
    }
}

スタイルには Bootstrap 5 を使っています。

表示するデータ（上のコードの data）は以下のような JavaScript オブジェクトで、Web API から fetch メソッドを使用して取得した JSON 文字列から取得しています。

Comments

[echizeyayota]

SurferOnWww さん。
コメントありがとうございます。
Visual Studio 2022 のテンプレートで生成されるプロジェクトのご紹介ありがとうございます。
Reactの理解を深める上で参考にさせていただきます。

Answer 2

class App extends Component {
  state = {
    charcters: [

ここで、"characters"の綴りが間違っていて"charcters"になっていますので、charactersにすると動くようです。
スペルチェッカのあるエディタを使うといいかと思います。

Comments

[echizeyayota]

yoshiokatsuneo さん。
コメントありがとうございます。
ご指摘のように"charcters"の綴りを"characters"に直すと、テーブルの内容も表示されるようになりました。

なお、スペルチェッカーとしてVSCodeの拡張機能であるCode Spell Checkerをインストールしておきました。
"charcters"のままにしておくと、単語に下線が引かれるようになりました。
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

今後ともどうぞよろしくお願いします。