【React】繰り返し処理で複数の画像を表示する

やりたいこと

1. 親コンポーネントで画像のsrcとなるURLが入った配列を作る
2. 親コンポーネントから子コンポーネントにpropsで配列を渡す
3. 子コンポーネントでimageタグを作成、srcは親コンポーネントからもらったURLを参照する

実装

親コンポーネント

const Parent = () => {
    const [srcArray, setSrcArray] = useState(['URL1','URL2','URL3']);
    return (
        <>
            <Child srcArray={srcArray} />
        </>
    )
}

子コンポーネント

const Child = (props) => {
    const imageLists = props.srcArray.map((src,i) => {
        return <li key={i}><img src={src} /></li>
    })
    return (
        <>
            {imageLists}
        </>
    )
}

解説

親コンポーネントから渡された、画像のsrcが入った配列を受け取る。
配列なので、mapで処理を行う。

mapメソッド

mapはJSの配列についてのメソッドで、
コールバック関数という、引数に何らかの処理を定義して使う関数です。
引数に指定した処理を行い、その結果を新しい配列として返します。
処理は配列の中身を取り出して行います。

今回は、配列の中身であるURL1,URL2,URL3をimageタグのsrc属性に指定していく。

keyについて

mapを使う場合、keyを指定しないと注意される。keyを指定しないとどの要素が変更されたのかReactが認識できない場合があるので、keyは指定したほうが良い。keyはユニークなものである必要がある。
要素の並び順が変わったらインデックス番号も変わってしまうため、インデックス番号をkeyとして使うのはあまりお勧めされていない。
今回は要素の並び順は変えないので、インデックス番号を使いました～。