Conditional API call and send data in react-select

Question

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 = () => {
    return fetch(
      "http://localhost:4000/left_parts",
      {
          method: 'get'
      }
    )
      .then(response => {
          if(response.status >= 400) {
              throw new Error("error");
          }
          return response.json()
      })
      .then(parts => {
          let partsName = [];
          for(let part of parts) {
              partsName.push({value: part.promptCode, label: part.text})
          }
          return {options: partsName};
      })
      .catch(err => {
          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) => {
        this.setState({
            partsType: item.value
        });
    };

    render() {
        return (
            <div>
                <Select
                    clearable={false}
                    searchable={false}
                    value={this.state.partsType}
                    options={partsType}
                    onChange={this.handlePartsType}
                />

                <Select.Async
                    clearable={false}
                    searchable={false}
                    name="PartNamePolygon"
                    value={this.state.PartNamePolygon}
                    onChange={this.PartNamePolygonSelect}
                    loadOptions={getParts}
                />
            </div>
        );
    }
}

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

Sport · Accepted Answer · 2017-07-25 08:56:05Z

2

try like this

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 = (type) => {
            return fetch(
              `http://localhost:4000/${type}`,
              {
                  method: 'get'
              }
            )
              .then(response => {
                  if(response.status >= 400){
                  throw new Error("error");
                  }
                  return response.json()
              })
              .then(parts => {
                  let partsName = [];


                  for(let part of parts) {
                  partsName.push({value: part.promptCode, label: part.text})
                  }


                  return {options: partsName};
              })
              .catch(err => {
                  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) => {
              this.setState({
                  partsType: item.value
              }, getParts(item.value));

              };

        render() {

            return (
            <div>
            <Select
            clearable={false}
            searchable={false}
            value={this.state.partsType}
            options={partsType}
            onChange={this.handlePartsType}
            />

        <Select.Async
                                  clearable={false}
                                  searchable={false}
                                  name="PartNamePolygon"
                                  value={this.state.PartNamePolygon}
                                  onChange={this.PartNamePolygonSelect}
                                  loadOptions={getParts}
                                />

        </div>
            );
          }
        }

edited Jul 25, 2017 at 8:56

answered Jul 25, 2017 at 6:29

Sport

9,0136 gold badges50 silver badges67 bronze badges

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

3 Comments

Piyush Over a year ago

how it will get that type value then?

Sport Over a year ago

handlePartsType = (item) => { this.setState({ partsType: item.value }, getParts(item.value)); @Piyush }; this will give you value.

Max Vorobjev Over a year ago

This won't work, since setState does not accept Promise as a callback result. Actually setState's callback is called after state updates and callback's is not merged into the state.

Max Vorobjev · Accepted Answer · 2017-07-25 10:01:31Z

There are couple of issues:

this.handlePartsType = this.handlePartsType.bind(this); is redundant. Also constructor does not have closing bracket. Select.Async is not supposed to be used to load options based on external value, it loads options when input changes.

Below is rewritten example:

		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'}
		];
    
    // test wrapper for fetch to be removed to talk to backend
    const fetch = () => Promise.resolve({json: () => Promise.resolve([{promptCode: 'test', text: 'Test option'}])})

		const getParts = (partsType) => {
		    return fetch(
			  `http://localhost:4000/${partsType}`,
			  {
			      method: 'get'
			  }
			)
			  .then(response => {
			      if(response.status >= 400){
				  throw new Error("error");
			      }
			      return response.json()
			  })
			  .then(parts => {
			      let partsName = [];


			      for(let part of parts) {
				  partsName.push({value: part.promptCode, label: part.text})
			      }


			      return {options: partsName};
			  })
			  .catch(err => {
			      console.log('could not fetch parts');
			      console.log(err);
			      return {options: []}
			  })

		};

		class Assess extends React.Component {
      state = {
			    partsType:'front_parts'
			};

      handlePartsType = (partsType) => {
        getParts(partsType).then(({options}) =>
          this.setState({partsType, partsOptions: options})
        )
      };
      
      componentDidMount() {
        this.handlePartsType(this.state.partsType);
      }

		render() {
		    return (
		    <div>
			<Select
			clearable={false}
			searchable={false}
			value={this.state.partsType}
			options={partsType}
			onChange={({value}) => this.handlePartsType(value)}
			/>
		<Select
				                  clearable={false}
				                  searchable={false}
				                  name="PartNamePolygon"
				                  value={this.state.partNamePolygon}
				                  onChange={this.partNamePolygonSelect}
                          options={this.state.partsOptions}
				                />

		</div>
		    );
		  }
		}


ReactDOM.render(
  <div>
   <Assess/>
  </div>,
  document.getElementById('root')
)

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="https://unpkg.com/classnames/index.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-input-autosize.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-select.js"></script>


<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/react-select.css">
</head>
<body>
<div id='root'></div>
</body>
</html>

You can see in the code from answer handlePartsType = (partsType) => { getParts(partsType).then(({options}) => this.setState({partsType, partsOptions: options}) ) }; queries based on first select option and fills in options for second select. Please feel free to run snippet.

Collectives™ on Stack Overflow

Conditional API call and send data in react-select

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related