title: How to fetch an API in reactJs
body: <p><strong>please suggest a way to fetch an API rather than importing json file from DATA folder</strong></p>
  
  <blockquote>
    <p>edited~ I am trying to fetch some data(Api) as options in my
    Filtered  multiselect component. Very new to react please suggest</p>
  </blockquote>
  
  <p>`import React, { Component } from 'react'
         import FilteredMultiSelect from 'react-filtered-multiselect';
         import axios from 'axios';</p>
  
  <pre><code>class SlideOne extends Component  {
  
      constructor() {
          super()
          this.state = {
            selectedOptions: [],
          }
        }
      componentDidMount(){
          axios.get("https://api.myjson.com/bins/xcfy7/")
           .then((response)=&gt;{
            this.setState(()=&gt;{
                     return {
                       selectedOptions: response.data.tax
                     }
            })
           })     
      }
  
      handleDeselect = (deselectedOptions) =&gt; {
          var selectedOptions = this.state.selectedOptions.slice()
          deselectedOptions.forEach(option =&gt; {
            selectedOptions.splice(selectedOptions.indexOf(option), 1)
          })
          this.setState({selectedOptions})
      }
  
      handleSelect = (selectedOptions) =&gt; {
  
          selectedOptions.sort((a, b) =&gt; a.taxId - b.taxId)
          this.setState({selectedOptions})
      }
  
      render() {
  
  
        return (
  
            &lt;div className="row"&gt;   
             &lt;div className="col-md-6"&gt;
              &lt;FilteredMultiSelect
                placeholder="Select from here"
                buttonText="Add"
                classNames={{
                  filter: 'form-control',            
                  select: 'form-control',
                  button: 'btn btn btn-block btn-default',           
                  buttonActive: 'btn btn btn-block btn-primary'
                }}
                onChange={this.handleSelect}
                options={this.state.selectedOptions}
                selectedOptions={this.state.selectedOptions}
                textProp="taxName"
                valueProp="taxId"
              /&gt;
            &lt;/div&gt;      
            &lt;div className="col-md-6"&gt;
               &lt;FilteredMultiSelect
                placeholder="get selected here"
                buttonText="delete"
                classNames={{
  
                  filter: 'form-control',            
                  select: 'form-control',            
                  button: 'btn btn btn-block btn-default',            
                  buttonActive: 'btn btn btn-block btn-danger'
  
                }}
  
                onChange={this.handleDeselect}
                options={this.state.selectedOptions}
                textProp="taxName"
                valueProp="taxId"
              /&gt;
  
  
            &lt;/div&gt;
          &lt;/div&gt;)
  
      }}
  
      export default SlideOne;`
  </code></pre>