Example Todo list view model

todo-list.tsx

const useTodoListViewModel = () => {
  const [todos, setTodos] = useState<Todo[]>([]);

  const createTodo = (description: string) => {
    const newTodo: Todo = {
      description,
      complete: false,
    };

    setTodos((current) => [...current, newTodo]);
  };

  return {
    todos,
    createTodo,
  };
};

const TodoList = ({ todos }: { todos: Todo[] }) => {
  const todoList = todos.map((todo) => <Todo todo={todo} />);

  return <ul>{todoList}</ul>;
};