import * as React from 'react';
import {Container} from 'unstated';
import withContainers from 'unstated-with-containers';

class CounterContainer extends Container {
  state = { value: 0 };
  increment = () => {
    this.setState({ value: this.state.value + 1 });
  }
  decrement = () => {
    this.setState({ value: this.state.value - 1 });
  }
}

const App = withContainers ( CounterContainer )(
  ({ containers: [counter] }) => ( // props.containers[0] === props.container
    <>
      <p>{counter.state.value}</p>
      <button onClick={counter.increment.bind ( counter )}>Increment</button>
      <button onClick={counter.decrement.bind ( counter )}>Decrement</button>
    </>
  )
);