フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

駅JPのデータを利用して何か開発する(APIで取得した値をreact-selectで表示) -STEP4-

はじめに

  • 前回、駅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

フロント側の実装

  • APIを実行し、鉄道会社一覧を表示する
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

実装イメージ

f:id:PX-WING:20200709083227p:plain