CODEWITHSUNDEEP
reactjs
iamjpcbau
iamjpcbau

Reputation: 404

React.js: Make content of dropdown dynamic from API

I'm using a library called react-select

The dropdown/select works fine. However, I want to make the content dynamic which would come from an API

The API response is like this:

    {
    "id": 1,
    "BIC": "AATCPHMMXXX",
    "BRSTN": "010140015",
    "NAME": "BANK CORPORATION"
        },
        {
    "id": 5,
    "BIC": "WEBPPHMMXXX",
    "BRSTN": "010350025",
    "NAME": "BANK OF THE WORLD"
        }

ClientMaintenancePage.js

    import Select from 'react-select';
    ...

    const optionsBrstn = [
        { label: "BIC1 BRSTN1 NAME1", value: BRSTN1 },
        { label: "BIC2 BRSTN2 NAME2", value: BRSTN2 },
        { label: "BIC3 BRSTN3 NAME3", value: BRSTN3 }
    ...
      ];

    <Select options={ optionsBrstn } />

I want it to appear in the dropdown with that pattern. Any suggestion would help, thanks.

ANSWER:

    import Select from 'react-select';
    ...

    const retrieveBanks = useCallback(() => {
        ClientMaintenanceService.retrieveBanks()
        .then((response) => {
          setDataBanks(response.data);
        }).catch((err) => {
          console.log("ClientMaintenancePage - retrieveBanks catch >>> " + err)
        })
      });

    useEffect(() => {
        retrieveBanks();
      }, []);

    const newOptions = dataBanks.map(({BIC, BRSTN, NAME}) => ({
        label: BIC + "  " + BRSTN + "  " + NAME ,
        value: BRSTN
      }))

    return (
    <Select 
                  isSearchable="true"
                  options={ newOptions } 
                  placeholder="Select BIC / BRSTN / Bank Name..." 
                />
    )

Upvotes: 0

Views: 1245

Answers (3)

iamhuynq
iamhuynq

Reputation: 5529

You need to format your data response and update options select in useEffect, check here CodeSandBox

import React, { useEffect, useState } from "react";
import "./styles.css";
import Select from "react-select";

export default function App() {
  const [optionsBrstn, setOption] = useState([]);
  useEffect(() => {
    const dataResponse = [
      {
        id: 1,
        BIC: "AATCPHMMXXX",
        BRSTN: "010140015",
        NAME: "BANK CORPORATION"
      },
      {
        id: 4,
        BIC: "AATCPHMMXXX",
        BRSTN: "010140015",
        NAME: "BANK CORPORATION"
      },
      {
        id: 5,
        BIC: "WEBPPHMMXXX",
        BRSTN: "010350025",
        NAME: "BANK OF THE WORLD"
      }
    ];
    const newOption = dataResponse.map(item => {
      return {
        label: `${item.BIC} ${item.BRSTN} ${item.NAME}`,
        value: item.BRSTN
      };
    });
    setOption(newOption);
  }, []);
  return (
    <div className="App">
      <Select options={optionsBrstn} />
    </div>
  );
}

PS: Currently CodeSandBox have some errors, you need to close this aleart (click on X at top right corner) enter image description here

Upvotes: 0

amdev
amdev

Reputation: 7442

if you are using hooks you can call the api in a useEffect with no dependencies and store the result of your api at the state of your function component and use the state value to show dropdown, basically you need a useEffect for api call and a useState to store the api data in it.


export default function MyComponent(props) {

  const [dropdownData, setDropdownData] = useState([])

  useEffect(() => {
   
    fetch(url, config)
       .then(result => result.json())
       .then(data => {
         setDropdownData(data)
       })
   

  }, [])

  
  return (
    
    <Select options={ dropdownData } />

  )
 
}

NOTE:

please note that fetch inside useEffect is just for demonstration purposes, you might have a separate function for handeling api calls or maybe if you are using redux, that might be the related action call; in redux way, also note that you might get the value from your store with useSelector, and that is basically another topic that requires you to read the redux hook api!

Upvotes: 0

bnabriss
bnabriss

Reputation: 99

Seems you need to update the array of objects structure, try this.

optionsBrstn = response.map(({BIC, BRSTN, NAME}) => ({
    label: BIC + " " + BRSTN + " " + NAME,
    value: BRSTN
}))

so optionsBrstn will be:

[
  {label: "AATCPHMMXXX 010140015 BANK CORPORATION", value: "010140015"},
  {label: "WEBPPHMMXXX 010350025 BANK OF THE WORLD", value: "010350025"}
]

Upvotes: 1

Related Questions