I have built an ‘edit’ page which is attempting to pull an individual object in my MongoDB Database, by using ‘findById’ in a serverless function hosted by Vercel.
The response data I’m then attempting to use to populate the ‘value’ of different inputs on this ‘edit’ page.
However, I’m getting no response at all from my call (not even an error message, neither in my console or my function logs on Vercel) - the page is loading successfully, but no data is being put into the inputs, they’re coming through as blank.
It’s worth noting - the URL is the MongoDB ID for the object that’s being called!
I have tried refactoring my code, searching for solutions, going through tutorials, but nothing seems to be working. It’s frustrating as I’m just not getting any feedback from my app, so don’t know what I’m doing wrong?
If anyone has any feedback on my code, that’d be appreciated. Please let me know if I’ve missed anything out below.
The ‘child’ and ‘parent’ components are just how the page gets navigated to.
My ‘route’ via React Router:
<Route path="/:id" component={EditDebt} />
My MongoDB schema:
const SubmitDebtSchema = new Schema ({
creditCard: String,
personalLoan: String,
provider: String,
balance: Number,
limit: Number,
monthly: Number,
interest: Number,
borrowed: Number
});
module.exports = mongoose.model('submitdebts', SubmitDebtSchema);
My ‘child’ component which uses props to fill the link using the response MongoDB ID.
<div className="debt-card-edit-container"><a className="debt-card-edit-link" href={`${props.edit}`}>Edit</a></div>
My ‘parent’ component which fills the prop in using a database call:
<IndividualDebtCard edit={debt._id} />
My ‘fetch’ serverless function:
const mongoose = require("mongoose");
const SubmitDebt = require("./submitDebtSchema");
require("dotenv").config();
mongoose.connect(process.env.MONGO_URI);
module.exports = async (req, res) => {
let id = req.params.id;
await SubmitDebt.findById(id, function(err, submitdebts) {
return res.status(200).json(submitdebts);
});
};
Finally, and most importantly, my actual ‘edit’ component in full…
class EditDebt extends Component {
constructor(props) {
super(props)
this.state = {
provider: '',
balance: '',
limit: '',
monthly: '',
interest: '',
borrowed: ''
}
this.toggleCreditCard = this.toggleCreditCard.bind(this);
this.togglePersonalLoan = this.togglePersonalLoan.bind(this);
this.onChange = this.onChange.bind(this);
}
componentDidMount() {
axios.get("/api/fetchEditDebt"+this.props.match.params.id)
.then((res) => {
this.setState({
provider: res.data.provider,
balance: res.data.balance,
limit: res.data.limit,
monthly: res.data.monthly,
interest: res.data.interest,
borrowed: res.data.borrowed
})
console.log(res)
console.log(this.state.provider)
})
.catch(e => {
console.log(e)
})
}
onChange = (e) => {
this.setState({ [e.target.name]: e.target.value})
}
render() {
return (
<section className="edit-debt-section">
<div className="edit-debt-container">
<DashboardReturn />
<form className="edit-debt-form" method="POST">
<div className="edit-debt-form-content">
<h2 className="edit-debt-heading">Edit your linked debt</h2>
<label className="edit-debt-label">Balance</label>
<div className="edit-debt-input-container">
<h6 className="edit-debt-input-text">£</h6>
<input className="edit-debt-number-input" type="number" name="balance" value={this.state.balance} onChange={this.onChange} step="0.01" />
</div>
<label className="edit-debt-label">Amount borrowed</label>
<div className="edit-debt-input-container">
<h6 className="edit-debt-input-text">£</h6>
<input className="edit-debt-number-input" type="number" name="borrowed" value={this.state.borrowed} onChange={this.onChange} step="0.01" />
</div>
<label className="edit-debt-label">Credit limit</label>
<div className="edit-debt-input-container">
<h6 className="edit-debt-input-text">£</h6>
<input className="edit-debt-number-input" type="number" name="limit" value={this.state.limit} onChange={this.onChange} step="0.01" />
</div>
<label className="edit-debt-label">Monthly repayment</label>
<div className="edit-debt-input-container">
<h6 className="edit-debt-input-text">£</h6>
<input className="edit-debt-number-input" type="number" name="monthly" value={this.state.monthly} onChange={this.onChange} step="0.01" />
</div>
<label className="edit-debt-label">Interest rate?</label>
<div className="edit-debt-input-container">
<input className="edit-debt-number-input-alt" type="number" name="interest" value={this.state.interest} onChange={this.onChange} step="0.01" />
<h6 className="edit-debt-input-text-alt">%</h6>
</div>
</form>
</div>
</section>
)
}
}
Sorry about all of the code, and please let me know if I’ve missed anything which is really important in my question.
Thank you
EDIT: I’ve added a couple of console logs in to my Axios function. The ‘this.state.provider’ is undefined, and this is the object res that gets returned:
Object
config: {url: "/api/fetchEditDebt/5f8da21ba227e300076c3299", method: "get", headers: {Accept: "application/json, text/plain, */*"}, transformRequest: Array, transformResponse: Array, …}
data: "<!doctype html><html lang=\"en\"><head><meta charset=\"utf-8\"/><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"/><lin…"
headers: {access-control-allow-origin: "*", age: "41", cache-control: "s-maxage=0", content-disposition: "inline; filename=\"index.html\"", content-encoding: "br", …}
request: XMLHttpRequest {listeners: Object, onreadystatechange: function, readyState: 4, timeout: 0, withCredentials: false, …}
status: 200
statusText: ""
Don’t know if this helps?