How can i reflesh select dropdown list in react

Question

I am making a project on php laravel and react. I have 2 dropdown list in react and they are connected after select first dropdownlist second will be loading from API request. I populated lists with states but whenever i setState() page is re-render and every selectments are reseted. I tried this to prevent re-render:

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

it stop re-render but dropdown list doesn't populate.

this my select dropdown:

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

So is there a way to reload dropdown list for populate items without re-render ?

Answer 1

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

hence your preventing render so drop down options are not populating

solution: you may store the first select box value in state and place that to defaultValue

i don't have your full code structure so your code may become like bellow

onChange=(e)=>{
  this.setState({
    value:e.target.value
   })
}


{['segments'].map(key => (
<Select
    key="segment_2"
    size="large"
    // append state value to default value and onChange event
    defaultValue={this.state.value}
    onChange={this.onChange}
    showSearch
    style={{width: '100%', marginTop: 16, borderRadius: 0}}
    placeholder="Segment Seçiniz"
    optionFilterProp="children"
    onChange={() => {
    }}
    filterOption={(input, option) => option.props.children.toString().toLowerCase().indexOf(input.toLowerCase()) >= 0}>
    {this.state.segment_right.map(({[key]: value}) =>
        <Select.Option key={value} value={value}>{value}</Select.Option>)}
</Select>
))}

please go through with this link example code or refer bellow code there second select box value changing with first select box

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: undefined,
      loading: false,
      count: []
    };
  }

  onFirstSelect = e => {
    const value = e.target.value;
    this.setState(
      {
        loading: true,
        value: value
      },
      //call the api and
      () => {
        this.setState({
          loading: false,
          count: [value, 1]
        });
      }
    );
  };

  render() {
    return (
      !this.state.loading && (
        <div className="App">
          <select onChange={this.onFirstSelect} defaultValue={this.state.value}>
            <option>slect value</option>
            <option value="a">a</option>
            <option value="b">b</option>
            <option value="c">c</option>
            <option value="d">d</option>
          </select>
          <select>
            <option>slect value</option>
            {this.state.count.map(d => <option value={d}>{d}</option>)}
          </select>
        </div>
      )
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);