Filters.jsx

import React from 'react';
import { debounce } from 'lodash';
import PropTypes from 'prop-types';

export default class Filters extends React.Component {
  static propTypes = {
    initialFilters: PropTypes.objectOf(PropTypes.string),
    render: PropTypes.func.isRequired,
    afterChange: PropTypes.func,
  };

  static defaultProps = {
    initialFilters: {},
    afterChange: () => {},
  };

  constructor(props) {
    super(props);
    this.state = { filters: props.initialFilters };
    this.debouncedAfterChange = debounce(this.props.afterChange, 500);
  }

  onChange = (name, value) => {
    this.setState(
      state => ({ filters: { ...state.filters, [name]: value } }),
      () => this.debouncedAfterChange(this.state.filters),
    );
  };

  render() {
    const { filters } = this.state;
    const { onChange } = this;
    return this.props.render({ filters, onChange });
  }
}

Products.jsx

<Filters
  initialFilters={{ keyword: '' }}
  afterChange={this.props.onFetchProducts}
  render={({ filters, onChange }) => (
    <div className="Form__Row">
      <Field
        label="Search Services"
        placeholder="e.g. 'Social Media' or 'SEO'"
        value={filters.keyword}
        onChange={e => onChange('keyword', e.target.value)}
        name="search-projects"
      />
    </div>
  )}
/>