How to update data in MERN stack - node.js

Question

I am trying to create an Inventory update-route in a MERN stack. My "Add new item" route works perfectly, but the "update route" as refused to update, can someone please tell me what I am doing wrong
//Model
const mongoose= require('mongoose');
const Schema = mongoose.Schema;
//create Schema
const ItemSchema = new Schema({
name : String,
description : String,
price : Number,
quantity : Number,
supplier : String,
taxable : Boolean,
});
module.exports=Inventory=mongoose.model('item',ItemSchema,'inventory');
Routes.js
router.post('/update', (req, res) => {
// inserting a new inventory
var _id = req.body._id;
var inventory = {
name:req.body.name,
description:req.body.description,
price:req.body.price,
quantity:req.body.quantity,
supplier:req.body.supplier,
taxable:req.body.taxable,
};
Inventory.findByIdAndUpdate(_id, { $set: inventory }, { new: true }, function (err, inventory) {
if (err) {
res.status(500);
res.send(err);
} else {
res.status(200);
res.send();
}
});
});
UpdateForm.js
class InventoryUpdateForm extends Component {
constructor(props){
super(props);
this.state = {
_id: this.props.match.params._id,
name: "",
description: "",
price: "",
quantity: "",
supplier: "",
taxable: "",
loading: true,
date: moment(new Date()).format("YYYY-MM-DD"),
};
//some code, basically binding change function with "this"
.........................
//Firstly, I get the entire data for the particular id here
componentWillMount(){
axios.get("/api/inventory/"+this.state._id)
.then(
(res) => {
var newState = {
name: res.data.name,
description: res.data.department,
price: res.data.price,
quantity:res.data.quantity,
supplier:res.data.supplier,
taxable:res.data.taxable,
};
this.setState( newState );
this.setState( { loading: false } );
},
(err) => {
alert('An error occured! Try refreshing the page.', err);
}
);
}
Here i handle the change event cases
handleDatePickerChange(date){
this.setState({ date: moment(date).format("YYYY-MM-DD") });
}
handleNameChange(event){
this.setState({ name: event.target.value });
}
handleDescriptionChange(event){
this.setState({ description: event.target.value });
}
handlePriceChange(event){
this.setState({ price: event.target.value });
handleQuantityChange(event){
this.setState({ quantity: event.target.value });
}
handleSupplierChange(event){
this.setState({ supplier: event.target.value });
}
handleTaxableChange(event){
this.setState({ taxable: event.target.value });
}
And i finally submit
submitForm(){
const { _id, name, description, price, quantity,supplier,taxable} = this.state;
var inventory = {
_id, name, description, price, quantity,supplier,taxable
};
axios.post('/update', inventory)
.then(
(res) => {
alert('Updated successfully!');
},
(err) => {
alert('An error occurred! Try submitting the form again.', err);
}
);
}
The data is retrieved, rendered and I actually update, but when I try to save it I get my error message
back
An error occurred! Try submitting the form again
How do I resolve this?

Answer 1

In axios to catch errors, we add a catch block.
Your submitForm must be like this, can you try and comment what happens?
submitForm() {
const { _id, name, description, price, quantity,supplier,taxable} = this.state;
var inventory = {
_id, name, description, price, quantity,supplier,taxable
};
axios.post('/update', inventory)
.then( res => {
alert('Updated successfully!');
}
)
.catch(err => {
console.log(err.response);
alert('An error occurred! Try submitting the form again.');
});
}
Also in findByIdAndUpdate, there is no need to use $set, you can simply do like this:
router.post("/update", (req, res) => {
console.log("req.body", req.body);
// inserting a new inventory
var _id = req.body._id;
var inventory = {
name: req.body.name,
description: req.body.description,
price: req.body.price,
quantity: req.body.quantity,
supplier: req.body.supplier,
taxable: req.body.taxable
};
Inventory.findByIdAndUpdate(_id, inventory, { new: true }, function(
err,
inventory
) {
if (err) {
console.log("err", err);
res.status(500).send(err);
} else {
console.log("success");
res.send(inventory);
}
});
});
Also can you set the state like this in constructor to match data types in mongoose schema.
this.state = {
_id: this.props.match.params._id,
name: "",
description: "",
price: 0,
quantity: 0,
supplier: "",
taxable: false,
loading: true,
date: moment(new Date()).format("YYYY-MM-DD"),
};
And lastly lets convert our price and quantity number by adding a plus.
handlePriceChange(event){
this.setState({ price: +event.target.value });
handleQuantityChange(event){
this.setState({ quantity: +event.target.value });
}

Answer 2

An alternative is to use the "PUT" method in express.
router.put('/update', (req, res) => {
//Code to update your data
})