Mapを使ったテーブルの表示がうまくいかない

Question

テーブルの表示がうまくいきません。

列にid,name,pvを表示させたいのですが、Mapの内容が読み込まれず、表示もされませんでした。
何かヒントいただけないでしょうか？

'use strict';
import React from 'react';


export default function Content(props) {
    let data = [
        {id:1, name:'Taro', pv:'' },
        {id:2, name:'Jiro', pv:'' },
        {id:3, name:'Saburo', pv:'' },
        {id:4, name:'Shiro', pv:'' },
        {id:5, name:'Goro', pv:'' },
        {id:6, name:'Mutsumi', pv:'' },
        {id:7, name:'Nanako', pv:'' },
        {id:8, name:'Yaeko', pv:'' },
        {id:9, name:'Kyuro', pv:'' },
        {id:10, name:'juro', pv:'' }
    ];

    return (
        <>
            <h1>
                Content にテーブルを作る課題やってます！
            </h1>
            {<table className="table1">
                <thead>
                    <th><th>id</th><th>name</th><th>pv</th></th>
                </thead>
                <tbody>
                    {date.map((value) =>
                        <tr>
                            <td>{value.id}</td>
                            <td>{value.name}</td>
                            <td>{value.pv}</td>
                        </tr>
                    )}
                </tbody>
            </table>}
        </>
    );
}

Comments

[maisumakun]

本題ではありませんが、JavaScriptで「Map」と大文字で書くと、別な機能が存在します。mapであれば正しく小文字で書いておきましょう。

Answer 1

data.mapメソッドの引数をvalueにしているのに、わざわざもとの展開前のdataを使っているからです。

                <tbody>
                    {data.map((value) =>(
                        <tr>
                            <td>{value.id}</td>
                            <td>{value.name}</td>
                            <td>{value.pv}</td>
                        </tr>
                    ))}
                </tbody>

mapメソッドは配列を展開するためのものなので、valueが持つオブジェクトを代入するには引数のvalueから呼び出さないといけません。

jQueryを知っているなら

$.each(data ,function(,item){
 id = item.id;
 name = item.name;
 pv = item.pv
})

とやっていることは同じですよ。

Comments

[yuki-o0413]

みていただきありがとうございました！
ご指摘いただいた部分、修正させていただきました。
しかし、まだ表示がされず、、、

他に問題ないか引き続き調査してみます

[FKM]

mapメソッドで処理する配列はdateになってますが…これはただの誤植？

[yuki-o0413]

まさに！それでした。
タイポでした。

助かりました！！ありがとうございました！