How to connect 2 dropdownlist each other with states in React

Question

I have 2 Select DropDownlist, i populate them with an API. they must be connected for the first dropdown's selected value. Then for that value i made second API call and populate the 2nd list. My data can be very huge so i cant merge two APIs.

// First DropDownList 

{['tablename'].map(key => (
    <Select
        size="large"
        showSearch
        style={{width: '100%'}}
        placeholder="placeholder"
        optionFilterProp="children"
        onChange={() => {
            this.fillSegments(e);
        }}
        filterOption={(input, option) => option.props.children.toString().toLowerCase().indexOf(input.toLowerCase()) >= 0}>
        {this.state.tablename.map(({[key]: value}) =>
            <Select.Option key={value} value={value}>{value}</Select.Option>)}
    </Select>
))}

// 2nd DropDownlist
{['segments'].map(key => (
    <Select
        size="large"
        showSearch
        style={{width: '100%', marginTop: 16, borderRadius: 0}}
        placeholder="placeholder2"
        optionFilterProp="children"
        onChange={() => {
        }}
        filterOption={(input, option) => option.props.children.toString().toLowerCase().indexOf(input.toLowerCase()) >= 0}
    >
        {this.state.segments.map(({[key]: value}) =>
            <Select.Option key={value} value={value}>{value}</Select.Option>)}
    </Select>
))}

fillsegments method:

fillsegments:
fillSegments(survey_title) {
    fetch('URL', {
        method: 'POST',
        body: JSON.stringify({
            "survey_title": survey_title
        }),
        headers: new Headers({
            "Authorization": "Bearer " + this.state.tkid,
            "Content-Type": "application/json",
        })
    })
        .then(results => results.json())
        .then(data => this.setState({
            segments: data,
        }));
}

And this is for the first dropdownlist:

fetch('URL', {
method: 'POST',
body: JSON.stringify({
    companyname: companyName
}),
headers: new Headers({
    "Authorization": "Bearer " + this.props.tkid,
    "Content-Type": "application/json",
})
})
.then(results => results.json())
.then(data => this.setState({
    tablename: data,
}));

Anyway these are my codes my problem is when i select second dropdown after the first, component is re-rendered due to setStates(), and all my selectedvalues are gone. I tried shouldcomponentUpdate but it just didnt populate my 2nd Dropdownlist i mean my values doesnt appear its still empty.

shouldComponentUpdate(nextProps, nextState) {
    if (this.state.segments !== nextState.segments) {
        return false
    }
    return true
}

So is there an any solution ?

I don't know if this will help but in Javascript, you can't really compare arrays with ===. [You need to compare every value](https://stackoverflow.com/questions/7837456/how-to-compare-arrays-in-javascript). This is why your shouldComponentUpdate does not work — Louis, Oct 23 '18 at 09:17
I think you need to pass `key` to both the `Select` dropdown, so it will not re-render if prop value is not changed. do you have sandbox for the code? — Piyush Bhati, Oct 23 '18 at 11:15

How to connect 2 dropdownlist each other with states in React

0 Answers0