Debouncing onChange event in React
<p>In my SuggestBox component I found that sometimes event.target.value is becoming undefined sometimes and I couldn't find how to fix that.</p>

<pre><code>import React from 'react';
import $ from 'jquery';

let debounce = require('lodash.debounce');
let uniqueKey = 0;
let jqxhr = {
    abort: () =&gt; {
    }
};

export default class SuggestBox extends React.Component {
    constructor(props) {
        super(props);
        this.doneTyping = debounce(this.doneTyping.bind(this), this.props.delay);
        this.state = {
            hidden: true,
            data: []
        }
    }

    render() {
        const hidden = this.state.hidden ? {display: 'none'} : {display: 'block'};

        return (
            &lt;div className="ReactSuggestion-Wrapper"&gt;
                &lt;input
                    type="text"
                    onChange={this.onChange.bind(this, event)}
                    onFocus={this.showSuggestBox.bind(this, event)}
                    onBlur={this.hideSuggestBox.bind(this, event)}
                /&gt;
                &lt;div style={hidden} className="ReactSuggestion-SuggestionBox"&gt;
                    {this.state.data.map((item) =&gt; {
                        return (
                            &lt;ul key={uniqueKey++} className="ReactSuggestion-SuggestionList"&gt;
                                &lt;li className="ReactSuggestion-SuggestionHeader"&gt;
                                    &lt;p&gt;
                                        {item.header.title}
                                    &lt;/p&gt;
                                &lt;/li&gt;
                                {item.data.map((data, dataKey) =&gt; {
                                    return (
                                        &lt;li key={dataKey} className="ReactSuggestion-SuggestionItems"&gt;
                                            &lt;a className="ReactSuggestion-Data"&gt;
                                                &lt;div className="ReactSuggestion-Data__Thumbnail"&gt;
                                                    &lt;img src={data.image} className="ReactSuggestion-Data__ThumbnailImage"/&gt;
                                                &lt;/div&gt;
                                                &lt;div className="ReactSuggestion-Data__Details"&gt;
                                                    &lt;p className="ReactSuggestion-Data__DetailsPrimary"&gt;
                                                        {data.primary}
                                                    &lt;/p&gt;
                                                    &lt;p className="ReactSuggestipn-Data__DetailsSecondary"&gt;
                                                        {data.secondary}
                                                    &lt;/p&gt;
                                                &lt;/div&gt;
                                            &lt;/a&gt;
                                        &lt;/li&gt;
                                    )
                                })}
                            &lt;/ul&gt;
                        );
                    })}
                &lt;/div&gt;
            &lt;/div&gt;
        )
    }

    showSuggestBox(event) {
        if (event.target.value == '') {
            return false;
        }
        if (this.state.oldValue == event.target.value) {
            this.setState({
                hidden: false
            })
        }
    }

    hideSuggestBox(event) {
        this.setState({
            hidden: true,
            oldValue: this.state.value
        })
    }

    onChange(event) {
        this.setState({
            value: event.target.value
        })
        this.doneTyping()
    }

    doneTyping() {
        const self = this;
        jqxhr = $.ajax({
            url: this.props.url,
            data: {q: this.state.value},
            type: this.props.method,
            dataType: 'JSON',
            success: relay =&gt; {
                let empty = false;
                relay.forEach(item =&gt; {
                    empty = item.data.length &gt; 0 ? false : true;
                })
                if (empty)
                    return false;

                self.setState({
                    data: relay,
                    hidden: false
                })
            }
        })
    }
}

SuggestBox.propTypes = {
    url: React.PropTypes.string,
    method: React.PropTypes.string,
    delay: React.PropTypes.number
}
</code></pre>

<p>As you can see in my constructor has the </p>

<pre><code>this.doneTyping = debounce(this.doneTyping.bind(this), this.props.delay);
</code></pre>

<p>code which is preventing event pooling in react so react obeys the debounce, but in my ajax request somehow my event.target.value or this.state.value is becomes undefined and I can't send ajax requests. However sometimes it can fixes itself and sending values.</p>

<p>How to prevent this ?</p>