I am facing an issue with the following React component. Even though the raiseCriteriaChange method is being called, it seems that the line this.props.onCriteriaChange(this.state.criteria) is never reached.
Do you have any insights into why this.props.onCriteriaChange is not being executed?
import * as React from 'react';
import { debounce } from 'lodash';
interface CustomerSearchCriteriaProps {
onCriteriaChange: (criteria: string) => void;
}
interface CustomerSearchCriteriaState {
criteria: string;
}
class CustomerSearchCriteria extends React.Component<CustomerSearchCriteriaProps, CustomerSearchCriteriaState> {
constructor() {
super();
this.state = {
criteria: ''
};
}
// problematic method:
raiseCriteriaChange = () => {
// The call reaches here without any issues ...
debounce(
() => {
// ... but for some reason, it never reaches this point ... Any ideas why?
this.props.onCriteriaChange(this.state.criteria);
},
300);
}
handleCriteriaChange = (e: React.FormEvent<HTMLInputElement>) => {
this.setState({ criteria: e.currentTarget.value }, () => {
this.raiseCriteriaChange();
});
}
render() {
return (
<div className="input-group">
<input
type="text"
value={this.state.criteria}
onChange={this.handleCriteriaChange}
className="form-control"
/>
</div>
);
}
}
export default CustomerSearchCriteria;