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
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:
try like this