-1

I need to call an api which consists of an array of string. I need to then publish the response from the api in a dropdown menu. Below is what the API holds that I need to call-

Sample api data - [“Leanne Graham”,”Ervin Howell”,”Patricia”]

Below sample code has the API which holds object information

import React, { Component } from "react";
import "../styles/schema.css";
import Params1 from "../components/Params1";
import axios from 'axios';
import Select from "react-select";
class New extends Component {

  constructor(props) {
    super(props);
    this.handleStoreprocSelection = this.handleStoreprocSelection.bind(this);
    this.state = {
      selectStoreprocOptions : [],
      id: "",
      name: '',
      itemSelected:false
    }
  }

  async getStoreProcOptions(){
    const resSchema = await axios.get('https://jsonplaceholder.typicode.com/users') --backend API call in object format
    const data = resSchema.data
  
    const options = data.map(d => ({
      "value" : d.id,
      "label" : d.name
    }))
    this.setState({selectStoreprocOptions: options})
  }

  handleStoreprocSelection(){
    // alert('You selected me!!')
    this.setState({itemSelected: true});
  }
  componentDidMount() {
    // get all entities - GET
    this.getStoreProcOptions()

  }
  

  render() {

    const itemSelected = this.state.itemSelected;
    let param;
    if (itemSelected) {
      param = <Params1 />;
    }
    
    return (
        <div>
            <div>
            <form id ="store-proc">
            <label>STORED PROCEDURE</label>
            <Select id="store-proc-select" options={this.state.selectStoreprocOptions} onChange={this.handleStoreprocSelection} /> --my dropdown
            </form>
            </div>
            {param}
        </div>
    );
  }
}
export default New;
Shubhangi Pant
  • 1
  • 6
  • 3
    Can you share with us, what you have done so far ? Or give us an example of your try – gikall Feb 08 '21 at 08:21
  • if you could post some minimal code to help us understand what you are trying to achieve, we could help you better – Appy Mango Feb 08 '21 at 08:29

2 Answers2

0
  1. You need a state, let's say an empty array.
  2. You need to call that API, using some of the methods, for example browser built in fetch or 3rd party library axios.
  3. Then you need to update your state with the response you will get from your API.
  4. Finally use your state inside of your component and display whatever you want.

These are the steps you need to follow, if you needed some logic. Since you didn't provide any code, I assume you didn't know from where to start. If you share some code, will be possible to help more.

Tigran Petrosyan
  • 524
  • 4
  • 14
0

are you using any library? because the plain HTML form select would be written in lower case <select/>, not <Select/>. if so, please state it out.

in plain HTML: the solution would be to map the array elements into <option/>. so, selectStoreprocOptions from state, as assigned here: this.setState({selectStoreprocOptions: options}).

inside render:

<select>
  {
    this.state.selectStoreprocOptions.map(selectStoreprocOption => (<option ..> .. </option>)
  }
</select>

Edit: Sorry, I've overseen the use of react-select. never used it, according to the API doc it looks good to me. have you checked that your state really contains an array with the expected objects?

probably ignore my post then, sorry again xD

bbortt
  • 405
  • 2
  • 13
  • Yes, I am using Select from react-select as mentioned in the import – Shubhangi Pant Feb 08 '21 at 08:52
  • oh sorry, I've overseen that one. I'll update the post. – bbortt Feb 08 '21 at 09:20
  • The only issue is that with a different api which has the data in below format, above code does not work for me- ["$G680301","AIM1","AIM2","B6435CUU","B6435DBS","B6435DBT","B6435DBU","BEFT","CC390","CICSIA"] can you please help? – Shubhangi Pant Feb 08 '21 at 11:29