質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

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

echizeyayota
echizeyayota

総合スコア64

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

2回答

0評価

0クリップ

160閲覧

投稿2022/05/09 08:34

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


【質問の主旨】

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;

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

SurferOnWww

2022/05/10 02:22

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

2022/05/10 07:01

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

2022/05/10 08:08

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

2022/05/10 10:41

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

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。