React Debounce Demo

A demo of React.js input debouncing using ES6

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This will be replaced with the component -->
</div>

Babel + JSX

class Table extends React.Component {
    constructor (props) {
        super(props)
        this.state = { searchTerm: props.searchTerm }
    }

    setSearchTerm (searchTerm) {
    	
        this.setState({ searchTerm })
    }

    render() {
        return (
            <div className="widget">
                <p>{this.state.searchTerm}</p>
                <input onChange={e => {debounce(this.setSearchTerm(e.target.value), 1000)}} />
            </div>
        )
    }
}

ReactDOM.render(<Table searchTerm="Initial search term" />, document.getElementById('container'));

function debounce(a,b,c){var d,e;return function(){function h(){d=null,c||(e=a.apply(f,g))}var f=this,g=arguments;return clearTimeout(d),d=setTimeout(h,b),c&&!d&&(e=a.apply(f,g)),e}}