Render Props Form State Provider

SearchBar.js

// @flow

import StateProvider from './SearchStateProvider';
import Container from './Container';

const renderSearchControls = ({ term, isFocused, onChange, onFocus, onBlur }) => (
  <Container isSearchFocused={isFocused}>
    <input value={term} onChange={onChange} onFocus={onFocus} onBlur={onBlur} />
  </Container>
);

export default () => (
  <StateProvider>
    {renderSearchControls}
  </StateProvider>
);

SearchStateProvider.js

// @flow

import React from 'react';

type SearchStateProviderRenderArgs = SearchState & {
  onChange: (term: string) => void,
  onFocus: () => void,
  onBlur: () => void,
};

type SearchStateProviderProps = {
  children: (args: SearchStateProviderRenderArgs) => any,
};

type SearchState = {
  term: string,
  isFocused: boolean,
};

export default class SearchStateProvider extends React.Component<*, SearchState> {
  state = {
    term: '',
    isFocused: false,
  };

  handleChange = (term: string) => this.setState({ term });
  handleFocus = () => this.setState({ isFocused: true });
  handleBlur = () => this.setState({ isFocused: false });

  render() {
    return this.props.children({
      ...this.state,
      onChange: this.handleChange,
      onFocus: this.handleFocus,
      onBlur: this.handleBlur,
    });
  }
}