Javascript (React_基本的なこと02)

■別ファイルのリストから参照。
基本的なことの続きとして、Reactのウェブサイトのチュートリアルを読み進めながら、適当にコード作成している。今回は、filterの機能と別ファイルのリストから画像参照しているところ。

ウェブサイトのサンプルから下のものを作成。
テキストボックスにLocation名を入れてFilterボタンを押すと、該当する画像のみピックアップする。Nextボタンで画像の切替えができる。

下のようなImgData.jsファイルを作り、SceneImgListというリストの中にそれぞれの画像の名前（name）、撮影場所（SnapLoc）、参照ファイル（url）を入れている。

下のApp.jsファイルでImgData.jsを読み込んで使用。NextボタンにhandleNext, FilterボタンにhandleFilterを設定。useStateを使って対象となる画像を絞り込み。
リストの要素を変数sceneに入れて、それぞれの要素（scene.nameなど）をhtml構文の中で使用。

App.jsコード

import { useState } from 'react';
import { SceneImgList } from './ImgData.js';

export default function Snaps() {
    const [index, setIndex] = useState(0);
    const [filteredList, setFilteredList] = useState(SceneImgList);
    const [inputText, setInputText] = useState("");

    function handleNext() {
        if (filteredList.length === 0) return;
        if (index + 1 === filteredList.length) {
            setIndex(0);
        } else {
            setIndex(index + 1);
        }
    }

    function handleFilter() {
        const newList = SceneImgList.filter(item => item.SnapLoc === inputText);
        setFilteredList(newList);
        setIndex(0);
    }

    let scene = filteredList[index];

    return (
        <>
            <p>
                <input
                    type="text"
                    placeholder="Locationを入力"
                    value={inputText}
                    onChange={(e) => setInputText(e.target.value)}
                    style={{ display: "block", marginBottom: "8px" }}
                />
                <button onClick={handleFilter}>
                    Filter
                </button>
            </p>

            <button onClick={handleNext}>
                Next
            </button>

            {scene ? (
                <div style={scene.theme}>
                    <h2>
                        <i>{scene.name}</i>
                        <br /> Location: {scene.SnapLoc}
                    </h2>
                    <h3>
                        ({index + 1} of {filteredList.length})
                    </h3>
                    <img src={scene.url} />
                </div>
            ) : (
                <p>No image</p>
            )}
        </>
    );
}