【 react 】Each child in a list should have a unique "key" prop.

Each child in a list should have a unique "key" prop.

今日はreactでもおなじみのmapオブジェクトで起こったエラーについて。
　

    draw(d){
        let s = {
            position: "absolute",
                left: (d.x - 25) + "px",
                top: (d.y -25) + "px",
                width: "50px",
                height: "50px",
                backgroundColor: "#66f3",
        };
        return <div style={s}></div>;
    }

    render(){
        return<div>
            <h1>react</h1>
            <h2 style={this.msgStyle}>show rect</h2>
            <div style={this.area} onClick={this.doaction}>
                {this.data.map((value)=>this.draw(value))}
            </div>
        </div>
    }

クリックした時に格納される位置データを配列に入れてそれぞれをdrawしています。
しかし、、、
　　

Warning: Each child in a list should have a unique "key" prop.

「それぞれに"key"を設定するべきだ！」
　　
というエラーが出ました。

"key"を設定する

ja.reactjs.org

こちらでも書かれているとおり
"key"というのはreactにとって複数あるものを識別することに
役立つ数字らしいのです。
　　
なので

<div key="1"></div>
<div key="2"></div>
<div key="3"></div>
.
.

のようなkey属性を追加していきましょう！！

解決

    draw(d, k){                                               // drawの第二引数にkを追加
        let s = {
            position: "absolute",
                left: (d.x - 25) + "px",
                top: (d.y -25) + "px",
                width: "50px",
                height: "50px",
                backgroundColor: "#66f3",
                key: k,                                            // キーというハッシュを追加
        };
        return <div style={s} key={s.key}></div>;      //それをkey属性に入れる
    }

    render(){
        return<div>
            <h1>react</h1>
            <h2 style={this.msgStyle}>show rect</h2>
            <div style={this.area} onClick={this.doaction}>
                {this.data.map((value, i)=>this.draw(value ,i))}     //mapの第二因数もdrawの引数に
            </div>
        </div>
    }

mapの第二引数が識別番号(インデックス)になるので、そのままkeyとして使うことができます！