idmontie

class App extends Component {
      state = { clickCount: 0 }

    canClick() {
      return this.state.clickCount < 4;
    }

    onIncrement() {
      this.setState(state => ({
        clickCount: state.clickCount + 1,

idmontie

<Toggle>
  {({ on, onToggle }) => (
      <Switch on={on} onToggle={onToggle} />
  )}
</Toggle>

idmontie

export default class Toggle extends Component {
    state = { on: false }

    onClick = (e) => {
        e.preventDefault();

        this.setState(state => ({
            on: !state.on,
        }));
    }

idmontie

const Switch = ({ on, onToggle }) => (
    <label className={styles.switch} onClick={onToggle}>
        <input
            checked={on}
            type="checkbox"
        />
        <span className={styles.slider} />
    </label>
);

idmontie

const mousePosition = () => (BaseComponent) => {
	return class MousePosition extends Component {
		constructor(props) {
			super(props);
			this.state = { x: 0, y: 0 };
		}

		componentDidMount() {
			this.listener = (e) => {
				this.setState(() => ({ x: e.pageX, y: e.pageY }));

idmontie

const tween = ({ tween, duration = 1000, defaultStart, end }) => (BaseComponent) => {
	return class Tween extends Component {
		constructor(props) {
			super(props);

			this.state = {
				timeStart: +new Date(),
				start: defaultStart(props) || 0,
				current: defaultStart(props) || 0,
			};

idmontie

import { compose, mapProps } from 'recompose'; 

const startX = 0;
const startY = 0;

const FollowingRectangle = compose(
	mousePosition(),
	tween({
		tween: linear,
		duration: 1000,

idmontie

const mousePosition = () => (BaseComponent) => {
  return class MousePosition extends Component {
    // ...
 
    render() {
      const { x, y } = this.state;

      return <BaseComponent {...this.props} x={x} y={y} />;
    }
  }

idmontie

const tween = ({ tween, duration = 1000, defaultStart, end }) => (BaseComponent) => {
  return class Tween extends Component {
    // ...
	  
    render() {
      const { current } = this.state;

      return <BaseComponent {...this.props} current={current} />
    }
  }

idmontie

function createMatrix(a = 1, b = a) {
  return Array.from({ length: a }, () => Array.from({ length: b }, () => 0));
}

// 1 x 10 Matrix
console.log(createMatrix(1, 10));

// Square Matrix
console.log(createMatrix(3));