Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Mike Lundahl
Mike Lundahl
13,510 Points

update MongoDB (mongoose) using express & react

I'm having a hard time figuring out what I did wrong. I have a user profile component that I want the logged in user to able to change his/her userdata like email, name, address etc. Feels like I've tried everything but I can't seem to figure it out.

Route file:

var express = require('express');
var methodOverride = require('method-override');
var router = express.Router();
var User = require('../models/user');
var path = require('path');
var mid = require('../middleware');
var logger = require('../util/logger');
var app = express();

app.use(methodOverride('_method'));
app.use(methodOverride('X-HTTP-Method'));
app.use(methodOverride('X-HTTP-Method-Override')); 
app.use(methodOverride('X-Method-Override')); 

router.put('api/update/:id', function(req, res){
    User.findByIdAndUpdate(req.params.id,
                        {
                            email: req.body.email,
                            userName: req.body.userName,
                            firstName: req.body.firstName,
                            lastName: req.body.lastName,
                            password: req.body.password            
                        },  
                        function(err, response){
                                if (err) {
                    res.send(err);
                    } else {
                            console.log(response);
                            console.log('user updated!');
                            res.redirect('/profile');
                                            }
                        });
});

react component:

import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Link  } from 'react-router-dom';


export default class UserProfile extends Component {

    constructor(props) {
        super(props);

        this.state = {
            data: { userName: 'noUser',
                    firstName: ''
                  }

            };
    }

        render() {

        return (
            <div className="normalContentWrapper">
                <div id="profile">
                    <h1>Profile</h1>
                        <div className="profile-container">
                            <h2>Welcome, {fetchUser.userName}</h2>
                            <form className="profile-form" method="POST" action="api/update/{{_id}}?_method=PUT">
                                <input type="text" placeholder={fetchUser.firstName} name="firstName" className="profile-input"/><br/>
                                <input type="text" placeholder={fetchUser.lastName} name="lastName" className="profile-input"/><br/>
                                <input type="text" placeholder={fetchUser.userName} name="userName" className="profile-input"/><br/>
                                <input type="text" placeholder={fetchUser.email} name="email" className="profile-input"/><br/>
                                <input type="text" placeholder="Change Password" name="password" className="profile-input"/><br/><br/>
                                <input type="submit" value="Save changes" className="btn"/>
                            </form>
                        </div>
                        <div className="profile-container">
                            <h2>Payment</h2>
                            <p>Edit payment methods</p>
                        </div>
                    </div>
            </div>
            );
        }
    }

I can also add to that, creating a new user, logging in & out etc works fine.

1 Answer

Kyle Johnson
Kyle Johnson
33,527 Points

Hi Mike,

Looking at the mongoose documentation for findByIdAndUpdate, I think you may not be saving the changes. I don't think the code below is saving anything.

{
     email: req.body.email,
     userName: req.body.userName,
     firstName: req.body.firstName,
     lastName: req.body.lastName,
     password: req.body.password            
}

The mongoose documentation is using $set before that block of code.

Tank.findByIdAndUpdate(id, { $set: { size: 'large' }}, { new: true }, function (err, tank) {
  if (err) return handleError(err);
  res.send(tank);
});

Also, if you do not need the document returned, you may want to use update instead.

Here is the link for mongoose documents

Lastly, this might help too: https://stackoverflow.com/questions/27108177/mongoose-findbyidandupdate-doesnt-work-with-req-body

Mike Lundahl
Mike Lundahl
13,510 Points

Thanks Kyle! I'm still getting "Cannot POST" message :(

Mike Lundahl
Mike Lundahl
13,510 Points

I got the method-override to work by moving it to the main app file. But I'm still getting "Cannot PUT /api/update/%7B%7B_id%7D%7D"

Changed the route to look like

router.put('api/update/:id', function(req, res){
    User.findByIdAndUpdate(req.params.id, {$set:req.body}, function(err, response){
                             if(err){
                                                    console.log(err);
                                }
                                res.send('Done');

                        });
});