Value component

Value.ts

import * as React from "react";

interface Props<T> {
  initial?: T;
  children: (r: { value?: T; onChange: (value: T) => void }) => React.ReactNode;
}

interface State<T> {
  value?: T;
}

/**
 * This component can be used to maintain some state and a change handler for
 * it. It is especially useful when testing controlled components.
 */
export default class Value<T = any> extends React.Component<
  Props<T>,
  State<T>
> {
  public state: Readonly<State<T>> = { value: this.props.initial };

  public handleChange = (value: T) => {
    this.setState({ value });
  };

  public render() {
    const { value } = this.state;
    return this.props.children({ value, onChange: this.handleChange });
  }
}