Problem updating data in an api with mui TextField inputs - reactjs

Question

I'm making a post admin tool with jsonplaceholder api and I'm having a problem with the put method. How can I update the text input modifications? It's not working even with the fixed data.
const EditPost = ({ match }) => {
const [state, setState] = useState({
title: "",
body: "",
});
const [error] = useState("");
const { id } = match.params;
const [post, setPost] = useState(null);
useEffect(() => {
axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
.then((response) => {
setPost(response.data);
});
}, []);
const updatePost = () => {
axios
.put(`https://jsonplaceholder.typicode.com/posts/${id}`, {
title: "Hello World!",
body: "Post updated."
})
.then((response) => {
setPost(response.data);
});
}
<form noValidate autoComplete="off" onSubmit={updatePost}>
<TextField
id="outlined-basic"
label="Title"
defaultValue={post.title || ""}
name="title"
type="text"
onChange="" />
<TextField
id="outlined-multiline-flexible"
label="Body"
defaultValue={post.body || ""}
name="body"
type="text"
onChange="" />
<Button
type="submit">
Update Post
</Button>

Answer 1

I would suggest you restructure your component as such:
const EditPost = ({ match }) => {
const [error] = useState("");
const { id } = match.params;
const [postTitle, setPostTitle] = useState("");
const [postBody, setPostBody] = useState("");
useEffect(() => {
axios
.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
.then((response) => {
setPost(response.data);
});
}, []);
const updatePost = () => {
axios
.put(`https://jsonplaceholder.typicode.com/posts/${id}`, {
title: postTitle,
body: postBody,
})
.then(({ data }) => {
setPostTitle(data.title);
setPostBody(data.body);
});
};
return (
<form noValidate autoComplete="off" onSubmit={updatePost}>
<TextField
id="outlined-basic"
label="Title"
value={postTitle}
name="title"
type="text"
onChange={(e) => setPostTitle(e.target.value)}
/>
<TextField
id="outlined-multiline-flexible"
label="Body"
value={postBody}
name="body"
type="text"
onChange={(e) => setPostBody(e.target.value)}
/>
<Button type="submit">Update Post</Button>
</form>
);
};
To be able to update the state as the user types, you need to control your form fields. The way to do this is to supply each field with a value prop, and use the onChange prop to update the state of the fields. This is the recommended by the mui team.
Furthermore, we have moved our state from a single object (which is reminiscent of the days of class components), to separate state objects (postBody and postTitle) which should reduce the number of times parts of the component have to re-render.