How to clear the inputs in function using React bootstrap typeahead

Question

I am trying the clear the inputs in the function using following code.

import {Typeahead} from 'react-bootstrap-typeahead';

type requestState={
  value:string[]
}

class Data extends Component<{},requestState> {
  constructor(props){  
    super(props);  
    this.state = {  
      value: [],
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.typeahead.getInstance().clear();
  }

  render() {
    return(
      <Typeahead
        ref={(ref) => this.typeahead = ref}
        id="data"
        labelKey="data"
        multiple={true}
        options={this.state.values}
        placeholder="Choose a data.."
        onChange={(e) => this.handleChange(e)}
      />
    );
  }
}

export default Data;

When I try using this code to clear the inputs at once, I am getting following error: "Property 'typeahead' does not exist on type 'Data'".

Could someone help me how to define typeahead property and what changes have to do to get this working.

Answer 1

This is a react ref issue and you just need to define the ref for use first.

Using classical definition:

class Data extends Component<{},requestState> {
  constructor(props){  
    super(props);  
    this.state = {  
      value: [],
    }
    this.handleChange = this.handleChange.bind(this);

    this.typeahead = null;
  }

  handleChange(e) {
    this.typeahead.getInstance().clear();
  }

  render() {
    return(
      <Typeahead
        ref={(ref) => this.typeahead = ref}
        id="data"
        labelKey="data"
        multiple={true}
        options={this.state.values}
        placeholder="Choose a data.."
        onChange={(e) => this.handleChange(e)}
      />
    );
  }
}

Using React.createRef

class Data extends Component<{},requestState> {
  constructor(props){  
    super(props);  
    this.state = {  
      value: [],
    }
    this.handleChange = this.handleChange.bind(this);

    this.typeahead = createRef<Typeahead>();
  }

  handleChange(e) {
    this.typeahead.current.getInstance().clear();
  }

  render() {
    return(
      <Typeahead
        ref={this.typeahead}
        id="data"
        labelKey="data"
        multiple={true}
        options={this.state.values}
        placeholder="Choose a data.."
        onChange={(e) => this.handleChange(e)}
      />
    );
  }
}

Refs and the DOM

Answer 2

This Changes worked for me in typescript to clear the inputs using React Bootstrap Typeahead

 import React, { Component } from 'react';
 import {Typeahead} from 'react-bootstrap-typeahead';

 class Data extends Component<{},requestState> {
 typeahead = React.createRef<Typeahead>();
 constructor(props){  
 super(props);  
   this.state = {  
    value: [],
   }
   this.handleChange = this.handleChange.bind(this);

   }

  handleChange(e) {
    this.typeahead.current.state.selected= []
  }

  render() {
   return(
    <Typeahead
    ref={this.typeahead}
    id="data"
    labelKey="data"
    multiple={true}
    options={this.state.values}
    placeholder="Choose a data.."
    onChange={(e) => this.handleChange(e)}
    />
  );
 }
}
export default Data;