はじめに
- 前回、駅JPの情報をbackend側でjson形式で返す処理を実装したので、そのJSONをフロント側で取得する
- 取得したデータをプルダウンで表示できるようにする
- react-selectパッケージを利用する
過去の記事
px-wing.hatenablog.com
px-wing.hatenablog.com
px-wing.hatenablog.com
react-select
yarn add react-select
react-select.com
フロント側の実装
import React,{useState, useEffect} from 'react'
import Select from 'react-select'
import axios from 'axios'
const Companies = () =>{
const [companies, setCompanies] = useState([]);
const [companyCd, setCompanyCd] = useState(0);
const [companyName, setCompanyName] = useState('鉄道会社を選択して下さい');
const getCmmpanies = async (barcode) => {
const result = await axios.get(`<鉄道会社一覧を取得するURLを指定>`)
.then(res => {
const companies = res.data.map(companie => {
return { value: companie.company_cd, label: companie.company_name }
});
setCompanies(companies)
})
}
useEffect(() => {
getCmmpanies();
},[]);
const changeCompany = (e) =>{
setCompanyCd(e.value)
setCompanyName(e.label)
}
return (
<>
<h4>駅検索</h4>
<Select options={companies} onChange={changeCompany} value={{ value: companyCd, label: companyName }}/>
</>
)
}
export default Companies
実装イメージ