Mobx example

import React from 'react';
import { observable, action, observe } from 'mobx';

// you can also use class and decorators but that's not really important here

// STORES
const createTodo = title =>
  observable(
    {
      id: uuid(),
      checked: false,
      title,

      setChecked() {
        this.checked = true;
      }
    },
    {
      setChecked: action
    }
  );

const createTodosStore = () =>
  observable(
    {
      todos: [],
      add(title) {
        this.todos.push(createTodo(title));
      }
    },
    {
      add: action
    }
  );

// COMPONENTS
const Todo = observe(({ todo }) => {
  return (
    <li>
      <input type="checbox" value={todo.checked} onClick={todo.setChecked()} /> {todo.title}
    </li>
  );
});

const Todos = observe(({ todoStore }) => {
  return (
    <div>
      <div>Todos:</div>
      <ul>
        todos.map(todo => <Todo todo={todo} />)
      </ul>
      <button
        onClick={() => {
          todoStore.add('Random Name');
        }}
      >
        Add a todo
      </button>
    </div>
  );
});

const App = () => {
  return <Todos todoStore={createTodosStore()} />;
};