A wrapper component providing state to a stateless React component in TypeScript.

WithState.tsx

// setState signature borrowed from react 😇
interface WithStateProps<S> {
    initialState: S;
    children: (
        state: S,
        setState: <K extends keyof S>(
            state: ((prevState: Readonly<S>, props: {}) => Pick<S, K> | S | null) | (Pick<S, K> | S | null),
            callback?: () => void
        ) => void
    ) => React.ReactChild;
}

class WithState<S> extends React.PureComponent<WithStateProps<S>, S> {
    constructor(props: WithStateProps<S>) {
        super(props);
        this.state = props.initialState;
    }

    render() {
        return this.props.children(this.state, this.setState.bind(this));
    }
}

// Example:
<WithState initialState={{ value: 100000 }}>
    {({ value }, setState) => (
        <NumberInput name="value" value={value} onChange={v => setState({ value: v })} />
    )}
</WithState>