React fetchを使ったＣＲＵＤ操作

import { useState, useEffect } from "react";

function App() {
	const [bookName, setBookName] = useState("");
	const [bookDesc, setBookDesc] = useState("");
	const [books, setBooks] = useState([]);
	const [updateId, setUpdateId] = useState("");
	const [updateName, setUpdateName] = useState("");
	const [updateDesc, setUpdateDesc] = useState("");
	const [deleteId, setDeleteId] = useState("");

	const handleNewNameInput = (e) => {
		setBookName(e.target.value);
	};
	const handleNewDescInput = (e) => {
		setBookDesc(e.target.value);
	};
	const handleUpdateIdInput = (e) => {
		setUpdateId(e.target.value);
	};
	const handleUpdateNameInput = (e) => {
		setUpdateName(e.target.value);
	};
	const handleUpdateDescInput = (e) => {
		setUpdateDesc(e.target.value);
	};
	const handleDeleteIdInput = (e) => {
		setDeleteId(e.target.value);
	};

	useEffect(() => {
		fetch("http://localhost:3001/books")
			.then((res) => res.json())
			.then((data) => {
				setBooks(data);
				console.log("成功：", data);
			})
			.catch((err) => console.log("失敗：", err));
	}, []);

	const createData = () => {
		if (bookName === "" || bookDesc === "") return;
		const bookInfo = {
			name: bookName,
			desc: bookDesc,
		};
		fetch("http://localhost:3001/books", {
			method: "POST",
			headers: {
				"Content-type": "application/json",
			},
			body: JSON.stringify(bookInfo),
		})
			.then((res) => res.json())
			.then((data) => {
				const newBooks = books;
				newBooks.push(data);
				setBooks(newBooks);
				setBookName("");
				setBookDesc("");
			})
			.catch((err) => console.log("createData失敗：", err));
	};

	const updateData = () => {
		if (updateId === "" || updateName === "" || updateDesc === "") return;
		const bookInfo = {
			name: updateName,
			url: updateDesc,
		};
		fetch(`http://localhost:3001/books/${updateId}`, {
			method: "PUT",
			headers: {
				"Content-type": "application/json",
			},
			body: JSON.stringify(bookInfo),
		})
			.then((res) => res.json())
			.then((data) => {
				const newBooks = books;
				const index = books.findIndex((book) => book.id === data.id);
				newBooks[index] = {
					id: data.id,
					name: data.name,
					desc: data.desc,
				};
				setBooks(newBooks);

				setUpdateId("");
				setUpdateName("");
				setUpdateDesc("");
			})
			.catch((err) => console.log("createData失敗：", err));
	};
	const deleteData = () => {
		if (deleteId === "") return;
		fetch(`http://localhost:3001/books/${deleteId}`, {
			method: "DELETE",
		})
			.then(() => {
				const newBooks = books;
				const index = newBooks.findIndex(
					(newBook) => newBook.id === Number(deleteId)
				);
				newBooks.splice(index, 1);
				setBooks(newBooks);
				setDeleteId("");
			})
			.catch((err) => console.log("deleteData失敗：", err));
	};

	return (
		<>
			<h3>Create data</h3>
			<div>
				<input
					value={bookName}
					onChange={handleNewNameInput}
					placeholder="Book Name"
				/>
			</div>
			<div>
				<input
					value={bookDesc}
					onChange={handleNewDescInput}
					placeholder="Book Desc"
				/>
			</div>
			<button onClick={createData}>CREATE</button>
			<hr />
			<h3>Read data</h3>
			<ul>
				{books.map((book) => {
					return (
						<li key={book.id}>
							{book.id}
							{book.name}
							{book.desc}
						</li>
					);
				})}
			</ul>
			<hr />
			<h3>update data</h3>
			<div>
				<input
					value={updateId}
					onChange={handleUpdateIdInput}
					placeholder="ID"
				/>
			</div>
			<div>
				<input
					value={updateName}
					onChange={handleUpdateNameInput}
					placeholder="Book Name"
				/>
			</div>
			<div>
				<input
					value={updateDesc}
					onChange={handleUpdateDescInput}
					placeholder="Book Desc"
				/>
			</div>
			<button onClick={updateData}>UPDATE</button>
			<hr />
			<h3>delete data</h3>
			<div>
				<input
					value={deleteId}
					onChange={handleDeleteIdInput}
					placeholder="ID"
				/>
			</div>
			<button onClick={deleteData}>DELETE</button>
		</>
	);
}

export default App;