Question

130

React - How to clear the value of a React-Select when another React-Select changes

rated 0 times [ 133] [ 3] / answers: 1 / hits: 17601 / 5 Years ago, thu, january 31, 2019, 12:00:00

I have two components side-by-side which are React-Select drop-down list components:

<SelectField 

  options={props.directories}

  placeholder=Directory

  onChange={props.onDirectoriesChange}

  value={props.directoryCodeName}

  isClearable={true}

  />



<SelectField 

  options={props.subDirectories}

  placeholder=Sub Directory

  onChange={props.onSubDirectoryChange}

  value={props.subDirectoryCodeName}

  isClearable={true}



  />

Now, when I select a value in the first drop-down, the second drop-down is populated according to what has been selected in the first one. When I select an option in the second drop-down then change the option in the first drop-down, the list of options have changed in the second drop down, which is great. However, the current value of the second drop down is not cleared. What is the best way to clear the value of the second drop-down?

First thing that comes to mind is to put some code in the onChange handlers below:

const onDirectoriesChangeHandler = (props: WrappedFieldsProps) => (

  selectedDirectories: IOption<string>

) => {

  props.directoryCodeName.input.onChange(fromJS(selectedDirectories));

};



const onSubDirectoryChangeHandler = (props: WrappedFieldsProps) => (

  selectedSubDirectories: IOption<string>

) => {

  props.subDirectoryCodeName.input.onChange(fromJS(selectedSubDirectories));

};

But I have reached a dead-end and I am thinking of Lifting State Up, unless there is a way to do this using React-Select's attributes?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kurtisl

Add To Favorites

Follow

Total Points: 559

Total Questions: 110

Total Answers: 97

Location: Tokelau

Member since Sun, May 7, 2023

1 Year ago

answered 5 Years ago anitadevonm · Accepted Answer

I think your instinct is correct - you should be lifting state up. There is probably a way to do this without, but it will likely cause some other problems later on.

Presumably your two Select components are contained in some other parent component? You could use the onChange function to set clear the value of the second input via setState(), something like:

onChangeSelectOne(value) {

  this.setState({

    directoryCodeName: value,

    subDirectoryCodeName: null

  })

}

Then refer to state where you define the two Selects:

<SelectField 

  options={props.directories}

  placeholder=Directory

  onChange={props.onDirectoriesChange}

  value={state.directoryCodeName} // notice state!

  isClearable={true}

  />



<SelectField 

  options={props.subDirectories}

  placeholder=Sub Directory

  onChange={props.onSubDirectoryChange}

  value={state.subDirectoryCodeName} // notice state!

  isClearable={true}

  />

One last step is to populate the component's state in its constructor:

constructor(props) {

  this.state = {

    directoryCodeName: props.directoryCodeName,

    subDirectoryCodeName: props.subDirectoryCodeName

  }

}

Calling setState() will trigger a re-render of your component, updating the dropdown to the value you've set.