TODO アプリ

import { useState } from 'react'; import { Button, Checkbox, Container, Flex, Input, Stack, Title, } from '@mantine/core'; import { useAsyncFn } from 'react-use'; // ミリ秒後に resolve する sleep 関数 const sleep = (ms: number) => new Promise((res) => setTimeout(res, ms)); type Todo = { name: string }; // タスクリスト初期データ const initialTodoList: Todo[] = [ { name: '観光スポットのリサーチをする' }, { name: 'スーパーに大根と卵を買いに行く' }, { name: '家計簿アプリにデータを入力する' }, ]; export const TodoApp = () => { const [name, setName] = useState(''); const [todoList, setTodoList] = useState(initialTodoList); // タスク作成処理 const [{ loading: isCreating }, createTodo] = useAsyncFn(async () => { try { await sleep(3000); // 時間のかかるタスク作成 API 呼び出しを想定 setTodoList((todoList) => [{ name }, ...todoList]); setName(''); } catch { alert('エラーが発生しました'); } }, [name]); return ( {/* タイトル */} TODO アプリ {/* 入力欄 */} setName(event.currentTarget.value)} /> {/* タスクリスト */} {todoList.map(({ name }) => ( ))} ); };