Clear react-select v2 input field from parent component reactjs?

Question

So, I have parent class, where I press button, and then call 'clearValue' method of TagSelector, where I need to clear AsyncCreatableSelect input.

TagSelector class:

export default class TagSelector extends Component {
    constructor(props) {
        super(props);

        this.state = {
            tagDownloaded: []
        };


      clearValue = () => {
        console.log(this.refs.acs);
        console.log("here I need to clear AsyncCreatableSelect"); // comment
      }

    render() {
        return (
            <AsyncCreatableSelect
                ref="acs"
                cacheOptions
                loadOptions={this.promiseOptions}
                isMulti
                defaultOptions={this.state.tagDownloaded}
                onChange={this.handleChange}
            />
        );
    }
}

I read api and know that 'clearValue' prop-method can help, but how - I don't know.

You have to make it work using state and props. state = { agDownloaded: [], selectedValues: [] } — shams.kool, Jul 12 '19 at 11:31

score 0 · Accepted Answer · answered Jul 12 '19 at 11:35

React Select feature has option to set select box value - to any of the field / reset as well. Just found below link with working demo , doing reset of select programatically. Refer it - How to programmatically clear/reset react-select v2? https://codesandbox.io/s/8256j5m3vl

Clear react-select v2 input field from parent component reactjs?

1 Answers1