Todo app from React Meetup

myStyle.scss

.done {
    color: red;
}

scratch.js

import "babel-polyfill";
import { h, render, Component } from "preact";
import styles from "./myStyle.scss";

const root = document.querySelector("#maji-app");
root.innerHTML = "";

const TodoList = ({ items, onTodoClick }) => (
  <ul>
    {items.map((item, i) => (
      <li
        key={i}
        class={item.done && styles.done}
        onClick={() => onTodoClick(item)}
      >
        {item.done ? <del>{item.name}</del> : item.name}
      </li>
    ))}
  </ul>
);

const todoItems = [
  { name: "Make todo app", done: false },
  { name: "next item", done: false },
  { name: "hallo", done: true }
];

class MyTodoList extends Component {
  constructor() {
    super();
    this.state = {
      items: [...todoItems],
      newItem: ""
    };
  }

  onInput = e => {
    this.setState({
      newItem: e.target.value
    });
  };

  onTodoClick = item => {
    this.setState({
      items: this.state.items.map(
        stateItem =>
          item === stateItem
            ? { ...stateItem, done: !stateItem.done }
            : stateItem
      )
    });
  };

  onAdd = () => {
    this.setState({
      items: [...this.state.items, { name: this.state.newItem, done: false }],
      newItem: ""
    });
  };

  render(props, { items, newItem }) {
    return (
      <div>
        <TodoList items={items} onTodoClick={this.onTodoClick} />
        <input type="text" onInput={this.onInput} value={newItem} />
        <button onClick={this.onAdd} type="button">
          Add Todo
        </button>
      </div>
    );
  }
}

render(
  <div class="Foo">
    <MyTodoList />
    <strong>Hoi</strong> world
    <MyTodoList />
  </div>,
  root,
  root.firstChildElement
);

// Live reloading
if (process.env.NODE_ENV !== "production") {
  require("preact/devtools");

  if (module.hot) {
    module.hot.accept();
  }
}