inputbox onchange event is not updating state in React JS - reactjs

Question

I'm learning React JS and trying to create a CRUD app. In a form, I could able to successfully fetch existing data and bind into forms controls. However, the onchange event of an input box does not seem to update the corresponding state. Sharing the code sample. Any input is highly appreciated.
import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom";
function BookEdits() {
const navigate = useNavigate();
const [data, setData] = useState("");
const [title, setTitle] = useState("");
const params = useParams();
// Please ignore this part
const handleSubmit = (event) => {
event.preventDefault();
const requestOptions = {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
title: title,
description: description,
author: author,
}),
};
fetch(`https://localhost:7174/api/books/${params.id}`, requestOptions).then(
(response) => {
console.log(response);
if (!response.ok) alert("Error saving book details");
else alert("Book details is saved successfully");
navigate("/BooksList");
}
);
};
//
useEffect(() => {
fetch(`https://localhost:7174/api/Books/${params.id}`)
.then((response) => response.json())
.then(setData);
}, []);
// Does not change post onchange event
console.log(data.title);
return (
<form onSubmit={handleSubmit}>
<label>
Title:
<input type="submit" />
</form>
);
<input
type="text" value={data.title}
onChange={(e) => setTitle(e.target.value)}
/>
</label>
<input type="submit" />
</form>
);
}
export default BookEdits;
State should update post onchange event. What am I missing here? Thanks in advance.

Answer 1

data.title isn't the same as title. You call setTitle, which changes title, but you're logging data.title, which isn't the same attribute.