title: Conditional API call and send data in react-select
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component} from 'react';  
  import Select from 'react-select';  
  import 'react-select/dist/react-select.css';
  
  const partsType = [
      {value: 'front_parts', label: 'Part Condition-Front'},
      {value: 'left_parts', label: 'Part Condition-Left'},
      {value: 'back_parts', label: 'Part Condition-Back'},
      {value: 'right_parts', label: 'Part Condition-Right'},
      {value: 'top_bottom_parts', label: 'Part Condition-Top/Bottom'},
      {value: 'glass', label: 'Glass Condition'},
      {value: 'electrical_parts', label: 'Electrical Parts'},
      {value: 'non_electrical_parts', label: 'Non-Electrical Parts'}
  ];
  
  const getParts = () =&gt; {
      return fetch(
        "http://localhost:4000/left_parts",
        {
            method: 'get'
        }
      )
        .then(response =&gt; {
            if(response.status &gt;= 400) {
                throw new Error("error");
            }
            return response.json()
        })
        .then(parts =&gt; {
            let partsName = [];
            for(let part of parts) {
                partsName.push({value: part.promptCode, label: part.text})
            }
            return {options: partsName};
        })
        .catch(err =&gt; {
            console.log('could not fetch parts');
            console.log(err);
            return {options: []}
        })
  };
  
  class Assess extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              partsType:'front_parts'        
      };
  
      this.handlePartsType = this.handlePartsType.bind(this);
  
      handlePartsType = (item) =&gt; {
          this.setState({
              partsType: item.value
          });
      };
  
      render() {
          return (
              &lt;div&gt;
                  &lt;Select
                      clearable={false}
                      searchable={false}
                      value={this.state.partsType}
                      options={partsType}
                      onChange={this.handlePartsType}
                  /&gt;
  
                  &lt;Select.Async
                      clearable={false}
                      searchable={false}
                      name="PartNamePolygon"
                      value={this.state.PartNamePolygon}
                      onChange={this.PartNamePolygonSelect}
                      loadOptions={getParts}
                  /&gt;
              &lt;/div&gt;
          );
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I had provided  the snippet. what i'm doing now is i had made two drop down and using first drop down data of second one will be changed. Now in that i am not getting how to call different API according to this.state.partsType because according to its state value, its value will be passed in "getParts". How to achieve that ? to pass the its value to it so that different API will be called</p>