How to clear Select / reset Select option into "Select.." / null?

Question

i use react-select on my dependent dropdownlist. Options2 will be dependent on Options1. i use filter() to display which Options2 will be showed up. Then i want to clear / reset the selectedOption2 eachtime selectedOption changed. I add my value props in order to understandable for you. When selectedOption is changed, selectedOption2 will be "Select..". i have tried to solve this code, but i can't.

import React, { Component } from "react";

import Select from "react-select";
import { options1, options2 } from "./data";

class Esensial extends Component {
  constructor() {
    super();
    this.state = {
      selectedOption: {},
      selectedOption2: {}
    };
  }

  handleChange1 = selectedOption => {
    this.setState({ selectedOption });
    this.setState({ selectedOption2: null });
  };

  handleChange2 = selectedOption => {
    this.setState({ selectedOption2: selectedOption });
  };
  render() {
   const options1 = [
      { value: "One", 
        label: "One" 
      },
      {
        value: "Two",
        label: "Two"
      }];
   const options2 = [
      {
        value: "One-A",
        label: "One-A",
        link: "One"
      },
      {
        value: "One-B",
        label: "One-B",
        link: "One"
      },
      {
        value: "Two-A",
        label: "Two-A",
        link: "Two"
      },
      {
        value: "Two-B",
        label: "Two-B",
        link: "Two"
       }];

    const filteredOptions = options2.filter(
      o => o.link === this.state.selectedOption.value
    );

    return (
      <div>
        <h1>UKM Esensial</h1>

        <div className="form-group">
          <label>Pilih Jenis Upaya Pelayanan Kesehatan</label>
          <Select
            className="form-control"
            isClearable={false}
            onChange={this.handleChange1}
            options={options1}
          />
        </div>
        <div className="form-group">
          <label>Pilih Variable</label>
          <Select
            className="form-control"
            isClearable
            onChange={this.handleChange2}
            options={filteredOptions}
          />
        </div>
      </div>
    );
  }
}
export default Esensial;

Tushar Agarwal · Accepted Answer · 2019-01-21 19:54:03Z

1

Firstly, making 2 separate setState calls is not a good idea. Secondly, I don't see the value prop set on Select elements. The following code should work:

import React, { Component } from "react";

import Select from "react-select";
import { options1, options2 } from "./data";

class Esensial extends Component {
  constructor() {
    super();
    this.state = {
      selectedOption: {},
      selectedOption2: {}
    };
  }

  handleChange1 = selectedOption => {
    this.setState({ selectedOption, selectedOption2: null });
  };

  handleChange2 = selectedOption => {
    this.setState({ selectedOption2: selectedOption });
  };
  render() {
    const filteredOptions = options2.filter(
      o => o.link === this.state.selectedOption.value
    );

    return (
      <div>
        <h1>UKM Esensial</h1>

        <div className="form-group">
          <label>Pilih Jenis Upaya Pelayanan Kesehatan</label>
          <Select
            className="form-control"
            isClearable={false}
            onChange={this.handleChange1}
            options={options1}
            value={this.state.selectedOption}
          />
        </div>
        <div className="form-group">
          <label>Pilih Variable</label>
          <Select
            className="form-control"
            isClearable
            onChange={this.handleChange2}
            options={filteredOptions}
            value={this.state.selectedOption2}
          />
        </div>
      </div>
    );
  }
}
export default Esensial;

answered Jan 21, 2019 at 19:54

Tushar Agarwal

3755 silver badges10 bronze badges

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

1 Comment

Moh Jonaidy Over a year ago

i set the value prop in outside class in "./data". the code works fine, but i want clear/reset the second select when i change the first select

Andrey Medvedev · Accepted Answer · 2019-01-21 20:03:08Z

1

I think the problem is that Select components don't know what you are actually selected. The Select component could render selected item by itself, but it won't remember what you selected later because you didn't explicitly tell it.

You should pass value prop to you Select components with the selectedOption and selectedOption2 from your state.

As Tushar Agarwal showed in the code example.

answered Jan 21, 2019 at 20:03

Andrey Medvedev

1,9911 gold badge10 silver badges7 bronze badges

3 Comments

Moh Jonaidy Over a year ago

i set the value prop in outside class in "./data". the code works fine, but i want clear/reset the second select when i change the first select

Andrey Medvedev Over a year ago

I don't know where you set value prop in ./data. But I'm sure it won't affect Selects from this component. value prop should be explicitly set in this component for each Select. Right now Select components don't know about your changes in the handlers, you don't use your state values.

Moh Jonaidy Over a year ago

Hi Andrey, i follow Tushar advice, and it works correctly. Thak You.

Collectives™ on Stack Overflow

How to clear Select / reset Select option into "Select.." / null?

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related