React Select - How to show / iterate through data from api call in option instead of hardcoding options?

Question

I am using react-select and I don\'t want to hard code the options which should be displayed, but options is data I am fetching from an api. I can\'t really find anything and wh

Answer 1

In your return component you can simply pass the cities that is fetched from api as

import Select from 'react-select';
import {availableCities} from '../utils/api.js';

let isLoadingExternally = false;

class App extends React.Component {

    constructor(props) {
    super(props);
    this.state = {
        selectedOption: '',
        clearable: true,
        cities: [],
    } 
}
componentDidMount() {
    isLoadingExternally = true;
    availableCities()
        .then(res => {
            this.setState({
                cities: res.Cities.name
            }, () => {
                isLoadingExternally = false;
            })
            console.log("hello", this.state.cities)
        })
}

handleChange(selectedOption) {
    this.setState({selectedOption});
}
render(){
return (
    

        
    
)
}
}


There are lots of configurable options available in the docs.
    

             

                                                        
            
            

              
                
                0
              
                   
                
               讨论(0)
              
                                                  
              
              

                          
             
       
          
              
                                       

     查看其它3个回答


            
                         

                    



               
            

    发布评论:
    

         
                        
    
    
提交评论