Updating products with fetch and input value fields - node.js

Question

I have spent whole day trying to figure this out. I want to update course recipes from my database (MongoDB) using my REST API call (Node.js with Express) by sumbiting input fields with new values of the recipe. I tried to show previous values by using input value="", but as I learned this makes it to be static. I tried to change it into dynamic accordingly to what I found online however none of tutorials I found would show what I am looking for. As you can see in code below I am trying to PUT new data that was previously set using setState(). Sadly I do not know how can I do it like this. Could you tell me if it is even possible and if so where can I learn to do it?
Here is code from React:
import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import Alert from "../elements/Alert";
import Axios from "axios";
export default function UpdateCourse() {
const id = window.location.href.split("?")[1];
const [dishName, setdishName] = useState("");
const [category, setcategory] = useState("");
const [author, setauthor] = useState("");
const [ingredients, setingredients] = useState([]);
const [cookingTime, setcookingTime] = useState("");
const [sourceUrl, setsourceUrl] = useState("");
const [imageUrl, setimageUrl] = useState("");
const [isPublished, setisPublished] = useState("true");
const [price, setprice] = useState("");
const [tags, settags] = useState([]);
const [alert, setAlert] = useState("");
const history = useHistory();
const url = `http://localhost:1234/api/courses/find/${id}`;
const old = async () => {
const result = await Axios.get(url);
setdishName(result.data.dishName);
setcategory(result.data.category);
setauthor(result.data.author);
setingredients(result.data.ingredients);
setcookingTime(result.data.cookingTime);
setsourceUrl(result.data.sourceUrl);
setimageUrl(result.data.imageUrl);
setisPublished(result.data.isPublished);
setprice(result.data.price);
settags(result.data.tags);
};
old();
console.log(old);
async function update() {
let item = {
dishName,
category,
author,
ingredients,
cookingTime,
sourceUrl,
imageUrl,
isPublished,
price,
tags,
};
console.log(item);
console.log(JSON.stringify(item));
const result = await fetch(`http://localhost:1234/api/courses/${id}`, {
method: "PUT",
body: JSON.stringify(item),
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
});
console.log(result);
if (result.status !== 200) {
return setAlert(result.status + " " + result.statusText);
}
history.push("/");
window.location.reload();
}
return (
<div className="col-sm-6" style={{ textAlign: "center" }}>
<h1 className="bigBar">Update recipe</h1>
<div style={{ marginLeft: "3.5rem" }}>
{alert !== "" && <Alert alert={alert}></Alert>}
</div>
<input
autoFocus="autofocus"
required="required"
type="text"
className="form-control"
placeholder={dishName}
value={dishName}
onChange={e => setdishName(e.target.value)}
/>
<br />
<input
required="required"
type="text"
className="form-control"
placeholder={category}
value={category}
onChange={e => setcategory(e.target.value)}
/>
<br />
<input
type="text"
onChange={e => setauthor(e.target.value)}
className="form-control"
required="required"
placeholder={author}
value={author}
/>
<br />
<input
type="text"
onChange={e => setingredients(e.target.value)}
className="form-control"
required="required"
placeholder={ingredients}
value={ingredients}
/>
<br />
<input
type="text"
onChange={e => setcookingTime(e.target.value)}
className="form-control"
required="required"
placeholder={cookingTime}
value={cookingTime}
/>
<br />
<input
type="text"
onChange={e => setsourceUrl(e.target.value)}
className="form-control"
required="required"
placeholder={sourceUrl}
value={sourceUrl}
/>
<br />
<input
type="text"
onChange={e => setimageUrl(e.target.value)}
className="form-control"
required="required"
placeholder={imageUrl}
value={imageUrl}
/>
<br />
<input
type="text"
onChange={e => setisPublished(e.target.value)}
className="form-control"
required="required"
placeholder={isPublished}
value={isPublished}
/>
<br />
<input
type="text"
onChange={e => setprice(e.target.value)}
className="form-control"
required="required"
placeholder={price}
value={price}
/>
<br />
<input
type="text"
onChange={e => settags(e.target.value)}
className="form-control"
required="required"
placeholder={tags}
value={tags}
/>
<br />
<button onClick={update} className="btn btn-primary">
Submit
</button>
</div>
);
}
Here is put from REST API:
router.put("/:id", async (req, res) => {
const { error } = validateCourse(req.body);
if (error)
//400 Bad request
return res.status(400).send(error.details[0].message);
const course = await Course.findByIdAndUpdate(
req.params.id,
_.pick(req.body, [
`dishName`,
`category`,
`password`,
`ingredients`,
`cookingTime`,
`sourceUrl`,
`imageUrl`,
`isPublished`,
`price`,
`tags`,
]),
{
useFindAndModify: false,
new: true,
}
);
if (!course)
return res.status(404).send(`The course with the given ID was not found`);
res.send(course);
});
And here is sample course from MongoDB:
{
"isPublished": true,
"tags": [
"pizza"
],
"_id": "60ae108ddfb18463c046a5ba",
"dishName": "Pizza with Cauliflower Crust",
"category": "pizza",
"ingredients": [
{
"_id": "60a4cfa48c20aa5c18517606",
"quantity": 1,
"unit": "",
"description": "medium head cauliflower cut into florets"
},
{
"_id": "60a4cfa48c20aa5c18517607",
"quantity": 1,
"unit": "",
"description": "egg"
},
{
"_id": "60a4cfa48c20aa5c18517608",
"quantity": 0.5,
"unit": "cup",
"description": "mozzarella shredded"
},
{
"_id": "60a4cfa48c20aa5c18517609",
"quantity": 1,
"unit": "tsp",
"description": "oregano or italian seasoning blend"
},
{
"_id": "60a4cfa48c20aa5c1851760a",
"quantity": null,
"unit": "",
"description": "Salt and pepper to taste"
},
{
"_id": "60a4cfa48c20aa5c1851760b",
"quantity": 1,
"unit": "cup",
"description": "chicken cooked and shredded"
},
{
"_id": "60a4cfa48c20aa5c1851760c",
"quantity": 0.5,
"unit": "cup",
"description": "barbecue sauce"
},
{
"_id": "60a4cfa48c20aa5c1851760d",
"quantity": 0.75,
"unit": "cup",
"description": "mozzarella shredded"
},
{
"_id": "60a4cfa48c20aa5c1851760e",
"quantity": null,
"unit": "",
"description": "Red onion to taste thinly sliced"
},
{
"_id": "60a4cfa48c20aa5c1851760f",
"quantity": null,
"unit": "",
"description": "Fresh cilantro to taste"
}
],
"cookingTime": 60,
"sourceUrl": "https://www.closetcooking.com/cauliflower-pizza-crust-with-bbq/",
"imageUrl": "https://www.closetcooking.com/wp-content/uploads/2013/02/BBQ-Chicken-Pizza-with-Cauliflower-Crust-500-4699.jpg",
"price": 29.99,
"date": "2021-05-26T09:10:37.620Z",
"__v": 0
}

Answer 1

When button is clicked and the PUT request is made and the values are updated - you must also tell your component states to mirror the new changes from the backend.
Therefor you must call old() method (which handles the fetching request and set states) after your PUT request. This is makes sure that your component states is sync with the values from the database.
Here is a small modification to your update() method (I marked it with an arrow):
async function update() {
let item = {
dishName,
category,
author,
ingredients,
cookingTime,
sourceUrl,
imageUrl,
isPublished,
price,
tags,
};
console.log(item);
console.log(JSON.stringify(item));
const result = await fetch(`http://localhost:1234/api/courses/${id}`, {
method: "PUT",
body: JSON.stringify(item),
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
});
console.log(result);
if (result.status !== 200) {
return setAlert(result.status + " " + result.statusText);
}
history.push("/");
window.location.reload();
old() <----- THIS
}
UPDATE:
I made a small example in Codesandbox that help you display ingredients and change their values.
I havent used any UI libraries but i strongly recommend something like Material UI to implement the containers and display them in a more proper way -it is all up to you how you want to design it.
Well here is it: https://codesandbox.io/s/cocky-sammet-d8wq5?file=/src/App.js