JavaScript React

React useStateで作るTODOアプリ

 

 

環境構築

 ターミナル

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() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

MDN

 

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つだけ削除するという記述をしています。

 

-JavaScript, React