React for文内でonClickを定義する - Elsaの技術日記(徒然なるままに)

約1年前、Reactでモグラたたきを作成しました。
elsammit-beginnerblg.hatenablog.com

久しぶりにこちらのコードを見たのですが、、、
ちょっと汚い、、いやちょっとではない！！かなりだ！！
ということでコード修正・整理を行いました。

コードを修正していたところ、モグラたたきのマップ作成のコードがこんな感じになっていました。。。
ちょっとこれは。。

            <table>
                <tbody>
                    <tr>
                        <td><img id="Mas1" src={shibafu} alt="green" onClick={() => this.onClick("Mas1" )} /></td>
                        <td><img id="Mas2" src={shibafu} alt="green" onClick={() => this.onClick("Mas2" )} /></td>
                        <td><img id="Mas3" src={shibafu} alt="green"  onClick={() => this.onClick("Mas3" )} /></td>
                        <td><img id="Mas4" src={shibafu} alt="green"  onClick={() => this.onClick("Mas4" )} /></td>
                        <td><img id="Mas5" src={shibafu} alt="green"  onClick={() => this.onClick("Mas5" )} /></td>
                    </tr>
                    <tr>
                        <td><img id="Mas6" src={shibafu} alt="green"  onClick={() => this.onClick("Mas6" )} /></td>
                        <td><img id="Mas7" src={shibafu} alt="green"  onClick={() => this.onClick("Mas7" )} /></td>
                        <td><img id="Mas8" src={shibafu} alt="green"  onClick={() => this.onClick("Mas8" )} /></td>
                        <td><img id="Mas9" src={shibafu} alt="green"  onClick={() => this.onClick("Mas9" )} /></td>
                        <td><img id="Mas10" src={shibafu} alt="green"  onClick={() => this.onClick("Mas10" )} /></td>
                    </tr>
                    <tr>
                        <td><img id="Mas11" src={shibafu} alt="green"  onClick={() => this.onClick("Mas11" )} /></td>
                        <td><img id="Mas12" src={shibafu} alt="green"  onClick={() => this.onClick("Mas12" )} /></td>
                        <td><img id="Mas13" src={shibafu} alt="green"  onClick={() => this.onClick("Mas13" )} /></td>
                        <td><img id="Mas14" src={shibafu} alt="green"  onClick={() => this.onClick("Mas14" )} /></td>
                        <td><img id="Mas15" src={shibafu} alt="green"  onClick={() => this.onClick("Mas15" )} /></td>
                    </tr>
                    <tr>
                        <td><img id="Mas16" src={shibafu} alt="green"  onClick={() => this.onClick("Mas16" )} /></td>
                        <td><img id="Mas17" src={shibafu} alt="green"  onClick={() => this.onClick("Mas17" )} /></td>
                        <td><img id="Mas18" src={shibafu} alt="green"  onClick={() => this.onClick("Mas18" )} /></td>
                        <td><img id="Mas19" src={shibafu} alt="green"  onClick={() => this.onClick("Mas19" )} /></td>
                        <td><img id="Mas20" src={shibafu} alt="green"  onClick={() => this.onClick("Mas20" )} /></td>
                    </tr>
                    <tr>
                        <td><img id="Mas21" src={shibafu} alt="green"  onClick={() => this.onClick("Mas21" )} /></td>
                        <td><img id="Mas22" src={shibafu} alt="green"  onClick={() => this.onClick("Mas22" )} /></td>
                        <td><img id="Mas23" src={shibafu} alt="green"  onClick={() => this.onClick("Mas23" )} /></td>
                        <td><img id="Mas24" src={shibafu} alt="green"  onClick={() => this.onClick("Mas24" )} /></td>
                        <td><img id="Mas25" src={shibafu} alt="green"  onClick={() => this.onClick("Mas25" )} /></td>
                    </tr>
                </tbody>
            </table>

流石に微妙なので修正することにしました！！
修正するにあたり、onClickに引数を渡す方法が分からず少し苦労したので備忘録で残しておこうと思います！！

■Reactでのfor文の利用
■for文内でのonClick定義
■最後
■参考

■Reactでのfor文の利用

まずはおさらいを兼ねてReactでfor文を用いる方法を載せておきます。
例えば、5×5のマスを作成するコードはこちら。

MakeMap = () =>{
    var List = [];
    for(var i=1;i<=5;i++){
          var buf = [];
          for(var j=1;j<=5;j++){
             var num = (i-1)*5 + j;
             var str = "Mas" + num;
             buf.push(
                    <td>{str}</td>
             );
         }
         List.push(<tr>{buf}</tr>);
    }
    return List;
}
render(){
    return(<div>
        {this.MakeMap()}
    </div>);
}

こちらのコードを実行すると下記のような5×5のマスが作成されます。
f:id:Elsammit:20210805223602p:plain

先ほどの羅列したコードよりもよっぽどきれいに整理されています。

■for文内でのonClick定義

では本題のfor文内でのonClickの定義です。
onClickを定義するだけであれば問題ないのですが、引数を与えるとなると先ほどの、

onClick={() => this.onClick("Mas1" )}

といった形では実行できませんでした。

ではどうするのか？
onClick関数に対してbindを用いればOKです。
コードはこちら。

onClick={this.onClick.bind(this,str)}

strには任意の変数を入れることが出来ます。

もし複数引数を与えたい場合には第3、第4、、、と引数を与えればOKです。

■先ほどの羅列したコードを置き換えてみる
では先ほどのコードを置き換えてみます。
コードはこちら。
MakeMap = () =>{
var List = ;
for(var i=1;i<=5;i++){
var buf = ;
for(var j=1;j<=5;j++){
var num = (i-1)*5 + j;
var str = "Mas" + num;
buf.push(
green
);
}
List.push({buf});
}
return List;
}
render(){
return(