React.js: Make content of dropdown dynamic from API

Question

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..." 
                />
    )

Yes, I would like the json response to be rendered in options. — iamjpcbau
– iamjpcbau, Commented Mar 25, 2020 at 8:16

bnabriss · Accepted Answer · 2020-03-25 08:16:46Z

1

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"}
]

answered Mar 25, 2020 at 8:16

bnabriss

996 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

iamhuynq · Accepted Answer · 2020-03-25 08:28:16Z

0

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)

edited Mar 25, 2020 at 8:28

answered Mar 25, 2020 at 8:22

iamhuynq

5,5572 gold badges17 silver badges41 bronze badges

6 Comments

iamjpcbau Over a year ago

Hi, may I ask why this part is making an error, const newOption = dataResponse.map(item => { return { label: ${item.BIC} ${item.BRSTN} ${item.NAME}, value: item.BRSTN }; }); setOption(newOption); }, []);

iamjpcbau Over a year ago

This now works perfectly fine, just missed a semicolon. Thanks!

iamjpcbau Over a year ago

Hi @iamhuynq, may I also ask how can I pass the value of the dropdown once set, to a method then to an axios post request. Also, I edited my question to include your answer. Thanks

iamjpcbau Over a year ago

Also, I think I'm missing something. How do I add state to the dropdown using hooks? TIA

iamhuynq Over a year ago

please wait, i will check

|

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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!

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 25, 2020 at 8:18

amdev

7,8207 gold badges51 silver badges69 bronze badges

1 Comment

iamjpcbau Over a year ago

Tried this but it did not show properly on the Select.

Collectives™ on Stack Overflow

React.js: Make content of dropdown dynamic from API

3 Answers 3

Comments

6 Comments

NOTE:

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

NOTE:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related