App.jsx

import React from 'react';
import './App.css';

import { useTodoController } from './App.controller';

const App = () => {
  const { state, actions } = useTodoController();

  return (
    <div className="container">
      <form onSubmit={actions.addTodo}>
        <input
          placeholder="Add todo"
          value={state.todoName}
          onChange={actions.changeTodoName}
        />
      </form>
      <ul>
        {state.todoList.map((todo) => (
          <li
            key={todo.id}
          >
            <button onClick={() => actions.removeTodo(todo.id)}>&times;</button>
            <span className={todo.done ? 'done todo-name' : 'todo-name'} onClick={() => actions.toggleTodo(todo.id)}>{todo.name}</span>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default App;