I have just started learning mern and i making a simple app where i have to add items into a menu , update and delete them. for updating i want to pre populate the input field with the item data.
I have been sitting on this issue for a lot of time but i am not able to find a solution. I have set the value attribute of for each input but still i dont see any info in the input field.
React code
menuItems.jsx
import React, { useEffect, useState } from "react";
import edit from "/edit.png";
import rupee from "../utils/currencyFormatter.jsx";
import api from "../api/api.jsx";
import { capitalize } from "../utils/capitalize.jsx";
import available from "/available.png";
import notavailable from "/notavailable.png";
import deleteImg from "/delete.png";
import EditItem from "./editItem.jsx";
const menuItems = ({ category }) => {
const [editForm, setEditForm] = useState(false);
const [items, setItems] = useState([]);
useEffect(() => {
const getItems = async () => {
try {
const response = await api.get("/menu");
setItems(response.data);
} catch (error) {
console.log(error.message);
}
};
getItems();
}, []);
const [idi, setId] = useState(0);
return (
<ol>
{editForm && (
<EditItem
isVisible={editForm}
setIsVisible={setEditForm}
category={category}
id={idi}
/>
)}
{items.map((i, index) => (
<li
key={i._id}
className="grid grid-cols-6 text-[1.5vw] p-3 transition-all duration-100 hover:bg-orange-400 rounded-md"
>
{index + 1}
<p className=" flex flex-col justify-center font-semibold">
{capitalize(i.item)}
<span className="font-thin text-[1.3vw]">
{i.description}
</span>
</p>
<span>{rupee.format(i.price)}</span>
<span>
{i.availability ? (
<img
src={available}
alt="Available"
className=" h-8 w-8"
/>
) : (
<img
src={notavailable}
alt="Not Available"
className=" h-8 w-8"
/>
)}
</span>
<button
onClick={() => {
setEditForm(true);
setId(i._id);
}}
>
<img src={edit} alt="edit" className="h-10 w-10" />
</button>
<button>
<img
src={deleteImg}
alt="delete"
className=" h-10 w-10"
/>
</button>
</li>
))}
</ol>
);
};
export default menuItems;
editItem.jsx
import React, { useEffect, useRef, useState } from "react";
import axios from "../api/api.jsx";
const editItem = ({ isVisible, setIsVisible, category, id }) => {
const [formData, setFormData] = useState({});
useEffect(() => {
const getItems = async () => {
try {
const response = await axios.get(`/menu/${id}`);
setFormData(response.data);
console.log("updated formData:", formData);
} catch (error) {
console.log(error.message);
setFormData({});
}
};
getItems();
}, [id]);
const handleSubmit = async (event) => {
event.preventDefault();
try {
console.log(formData.category);
const response = await axios.put(`/menu/${id}`, formData);
console.log(response.data);
} catch (error) {
console.error(error.message);
}
setIsVisible(!isVisible);
};
if (!isVisible) return null;
return (
<div className="fixed inset-0 bg-black bg-opacity-25 backdrop-blur-sm flex justify-center items-center">
<div className="w-[50%] flex flex-col">
<div className="bg-white p-2 rounded">
<h2 className="mb-4 text-2xl text-center font-bold text-gray-900">
Add a new product
</h2>
<form
action="post"
className=" p-4"
onSubmit={handleSubmit}
>
<div className="grid gap-4 sm:grid-cols-2 sm:gap-6">
<div className="sm:col-span-2">
<label
htmlFor="item"
className="block mb-2 text-sm font-medium text-gray-90"
>
Item Name
</label>
<input
type="text"
name="item"
id="item"
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 "
placeholder="Type Item name"
required
value={formData.item}
onChange={(event) => {
setFormData({
...formData,
item: event.target.value,
});
console.log(
"Item input value:",
event.target.value
);
}}
/>
</div>
<div className="w-full">
<label
htmlFor="price"
className="block mb-2 text-sm font-medium text-gray-90"
>
Price
</label>
<input
type="number"
name="price"
id="price"
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 "
required
placeholder="Add the price"
value={formData.price}
onChange={(event) =>
setFormData({
...formData,
price: event.target.value,
})
}
/>
</div>
<div>
<label
htmlFor="category"
className="block mb-2 text-sm font-medium text-gray-90"
>
Category
</label>
<select
id="category"
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 "
value={formData.category}
onChange={(event) => {
setFormData({
...formData,
category: event.target.value,
});
}}
>
<option>Select category</option>
{category.map((c) => (
<option key={c._id} value={c._id}>
{c.name}
</option>
))}
</select>
</div>
<div className="flex items-center">
<label
htmlFor="availability"
className="block mb-2 text-sm font-medium text-gray-90 mr-5"
>
Availability
</label>
<input
type="checkbox"
name="avaialability"
id="availability"
value={formData.availability}
onChange={(event) => {
if (event.target.checked) {
setFormData({
...formData,
availability: true,
});
}
}}
/>
</div>
<div className="flex gap-4 items-center">
<label
htmlFor="veg"
className="block mb-2 text-sm font-medium text-gray-90"
>
Veg
</label>
<input
type="radio"
name="veg_or_nonveg"
value="veg"
id="veg"
onChange={(event) =>
setFormData({
...formData,
veg_or_nonveg: event.target.value,
})
}
/>
<label
htmlFor="nonveg"
className="block mb-2 text-sm font-medium text-gray-90"
>
Non Veg
</label>
<input
type="radio"
name="veg_or_nonveg"
value="non-veg"
id="nonveg"
onChange={(event) =>
setFormData({
...formData,
veg_or_nonveg: event.target.value,
})
}
/>
</div>
<div className="sm:col-span-2">
<label
htmlFor="description"
className="block mb-2 text-sm font-medium text-gray-90"
>
Description
</label>
<textarea
id="description"
rows="8"
className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 "
placeholder="Item Description"
value={formData.description}
onChange={(event) =>
setFormData({
...formData,
description: event.target.value,
})
}
></textarea>
</div>
</div>
<div className="flex">
<button
type="submit"
className="flex items-center px-5 py-2.5 mt-2 text-sm font-medium text-center rounded-lg focus:ring-4 focus:ring-primary-200"
>
Edit product
</button>
<button
className=" flex items-center px-5 py-2.5 mt-2 text-sm font-medium text-center rounded-lg text-red-600 focus:ring-4 focus:ring-primary-200"
onClick={() => {
setIsVisible(!isVisible);
}}
>
Cancel
</button>
</div>
</form>
</div>
</div>
</div>
);
};
export default editItem;
Express Code
controllers
import mongoose from "mongoose";
import { menuModel } from "../models/menuModel.js";
export const getMenuItems = async (req, res) => {
try {
const menuItems = await menuModel.find();
res.status(200).json(menuItems);
} catch (err) {
res.status(404).json({ message: err.message });
console.log(err);
}
};
export const getOneItem = async (req, res) => {
const id = req.params.id;
try {
const item = await menuModel.find({ _id: id });
res.status(200).json(item);
} catch (err) {
res.status(404).json({ message: err.message });
}
};
export const addMenuItems = async (req, res) => {
const item = req.body;
const newItem = new menuModel(item);
try {
await newItem.save();
res.status(201).json(newItem);
console.log(newItem);
} catch (err) {
console.log(err);
res.status(409).json({ message: err.message });
}
};
export const updateMenuItmes = async (req, res) => {
const { id: _id } = req.params;
const updatedData = req.body;
try {
if (!mongoose.Types.ObjectId.isValid(_id))
return res.status(404).send("no item with that id exists");
const updates = await menuModel.findByIdAndUpdate(_id, updatedData, {
new: true,
});
res.status(200).json(updates);
} catch (err) {
res.status(409).json({ message: err.message });
}
};
// export const deleteItems = async (req,res) =>{
// }
menuModel.jsx - contains the model of the menu
import { Decimal128 } from "mongodb";
import mongoose, { model } from "mongoose";
const { Schema } = mongoose;
const menuSchema = new Schema({
item: {
type: String,
required: true,
unique: true,
},
price: {
type: Number,
required: true,
default: 0.0,
},
availability: {
type: Boolean,
required: true,
default: true,
},
veg_or_nonveg: {
type: String,
required: true,
enum: ["Veg", "Non-Veg", "veg", "non-veg"],
},
description: {
type: String,
},
category: [
{
type: Schema.Types.ObjectId,
ref: "categoryModel",
},
],
});
export const menuModel = new model('menuModel', menuSchema);
i have added value attribute as you can see here but i find no pre populated data Can anyone help me with the issue.
here is the github repo link:
Looks like you have a getItems() call in the editItem component, so it fetches the same data again that you already had when displaying without edit - assuming /menu returns same data for all elements as /menu/id does for a single one. The delay might come from there as you await the response from the db.
Try passing the values as props to the edit component to not fetch it twice. When you have multiple menu items you can map through the array and pass the props to each individual item component. and have you tried using defaultValue instead of value to populate the input fields?