React配列
https://mosya.dev/react/lessons/react-array-insert
code:js
import {
useState,
useRef,
} from "react";
export function App() {
const inputRef = useRef(null);
const tasks, setTasks = useState([
{ id: 1, title: "掃除をする" },
{ id: 2, title: "洗濯をする" },
]);
function addTask(title) {
const newTask = {
id: tasks.length + 1,
title,
};
const newTasks = [
...tasks,
newTask,
];
setTasks(newTasks);
}
return (
<div className="todo">
<div className="todo-inner">
<h2 className="todo-title">
タスクリスト
</h2>
<hr className="todo-separator" />
<ul className="todo-list">
{tasks.map((task) => (
<li
key={task.id}
className="p-4"
<span className="w-full">
{task.title}
</span>
</li>
))}
</ul>
<hr className="todo-separator" />
<div className="todo-actions">
<input
ref={inputRef}
aria-label="タスクを追加するテキストフィールド"
className="todo-input"
placeholder="タスクを追加してください"
type="text"
/>
<button
onClick={() =>
addTask(
inputRef.current?.value
)
}
className="todo-button"
追加
</button>
</div>
</div>
</div>
);
}