lodash.debounce search in react js

Question

I'm trying to debounce a search in react using lodash, debounce.

But when ever its run I'm receiving a type error

TypeError: Cannot read property 'debounce' of undefined

I have tried moving it around in the code but can't understand why it isn't working

I started off by importing it

import { _, debounce } from 'lodash'

I have an input as following

<input
    type="text"
    value={this.state.query}
    onChange={(e) => {this.updateQuery(e.target.value)}}
    placeholder="Search by title or author"
/>

Connected to this function

updateQuery = (query) => {
    _.debounce(() => query(this.setState({ query }), 500))
    this.onBookSearch(query)
}

Does anyone understand why this is?

Answer 1

I think your import is the problem. You probably want to import the _ as default:

import _, {debounce} from 'lodash';

Also you're not using the extracted function:

updateQuery = (query) => {
  debounce(() => query(this.setState({ query }), 500))
  this.onBookSearch(query)
}

Since you're extracting {debounce} in the import you can use it directly.