目次
環境構築
ターミナルnpx create-react-app react-todo
cd react-todo
npm start
作成の準備
src/App.jsを以下のように編集
App.js
import TodoList from "./components/TodoList";
function App() {
return (
<div>
<TodoList />
</div>
);
}
export default App;
TodoListを読み込んでいるのでこのページを作成します。
src/components/TodoList.js
TodoList.js
import { useState } from "react";
const TodoList = () => {
const TaskAll = [
{
task: "laravel",
isCompleted: false,
},
{
task: "react",
isCompleted: false,
},
{
task: "python",
isCompleted: false,
},
];
const [todos, setTodos] = useState(TaskAll);
return (
<div>
<h1>ToDo List</h1>
</div>
);
};
export default TodoList;
Todoリストの元になる配列TaskAllには、3つのタスクがオブジェクトで保存されています。useStateにTaskAllを指定することでtodosにはTodoリストが保存されます。todosの更新にはsetTodosを利用して行います。
ブラウザで確認すると画面にはToDo Listと表示されます。
ToDoリストの表示
TodoList
<div>
<h1>ToDo List</h1>
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo.task}</li>
))}
</ul>
</div>
ブラウザで確認をするとTaskAllのtaskが順番に並んでいます。
map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。
Stateの追加とinputタグの設定
TodoList.jsを編集
TodoList.js
const [task, setTask] = useState("");
const handleNewTask = (e) => {
setTask(e.target.value);
};
return (
<div>
<h1>ToDo List</h1>
新しいタスク:
<input value={task} onChange={handleNewTask} placeholder="new Task" />
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo.task}</li>
))}
</ul>
</div>
);
const [task, setTask] = useState("");
で新しいstateを定義しています。初期値は空です。
<input value={task} onChange={handleNewTask} placeholder="new Task" />
valueには初期値の空が入り、onChangeでhandleNewTaskを指定しています。
const handleNewTask = (e) => {
setTask(e.target.value);
};
引数にeを受け取ることで、入力が変更される度に値を
stateのsetTaskに代入しています。
console.log(e.target.value)とすることで確認をすることができます。
タスクの追加
TodoList.js
const handleSubmit = (e) => {
e.preventDefault();
if (task === "") return;
setTodos((todos) => [...todos, { task, isCompleted: false }]);
setTask("");
};
return (
<div>
<h1>ToDo List</h1>
<form onSubmit={handleSubmit}>
新しいタスク:
<input value={task} onChange={handleNewTask} placeholder="new Task" />
<button type="submit">追加</button>
</form>
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo.task}</li>
))}
</ul>
</div>
);
formのonSubmitでhandleSubmit関数を呼び出しています。
handleSubmit関数ではeを受け取り
e.preventDefault();でページのリロードが行われないように設定しています。
そのあとは条件分岐でinputで入力したtaskがからの場合はreturnで返し
文字が入力している場合はsetTodosを呼び出しtodoの中にtaskの値を入れています。完了フラグのisCompletedにはfalseを設定しています。
タスクの削除
TodoList
const handleDeleteTask = (index) => {
const newTodos = [...todos];
newTodos.splice(index, 1);
setTodos(newTodos);
};
return (
<div>
<h1>ToDo List</h1>
<form onSubmit={handleSubmit}>
新しいタスク:
<input value={task} onChange={handleNewTask} placeholder="new Task" />
<button type="submit">追加</button>
</form>
<ul>
{todos.map((todo, index) => (
<li key={index}>
{todo.task}
<span onClick={() => handleDeleteTask(index)}>削除</span>
</li>
))}
</ul>
</div>
);
taskを表示している横にspan要素で削除という文字をつけました。
この削除をクリックするとhandleDeleteTask関数を呼び出し
indexを渡しています。
handleDeleteTaskの中では渡されたindexの番号を取得して
1つだけ削除するという記述をしています。