Can't Edit and Update properties with form Reactjs and MongoDB

Question

So I'm using Nodejs, MongoDB and Reactjs and I'm trying to Edit properties of projects. I have multiple projects and when I want to edit properties of one I can't do it. We can access to properties inside inputs, we can see Title and Type but can't even delete, write, he access to properties by its ID but then I can't change it, I guess I have multiple problems here than.

I'll write here my server code, and my Edit/Update project page and a gif with an example when I say that I can't even change anything on inputs.

My server code:

//Render Edit Project Page byId 
app.get('/dashboard/project/:id/edit', function(req, res){
 let id = req.params.id;

Project.findById(id).exec((err, project) => {
    if (err) {
        console.log(err);
    }
    res.json(project);
});
}


//Update Projects Properties byId
app.put('/dashboard/project/:id/edit', function(req, res){
 var id = req.params.id;

 var project = {
   title: req.body.title,
   typeOfProduction: req.body.typeOfProduction
 };

 Project.findByIdAndUpdate(id, project, {new: true}, 
 function(err){
   if(err){
       console.log(err);
   }
   res.json(project);
  })
};

My React Component Edit Project Page

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';

import './EditProject.css';


class EditProject extends Component {
    constructor(props){
    super(props);
    this.state = {
      //project: {}
        title: '',
        typeOfProduction: ''
    };
}

inputChangedHandler = (event) => {
    const updatedProject = event.target.value;
}

componentDidMount() { 
// console.log("PROPS " + JSON.stringify(this.props));
    const { match: { params } } = this.props;

    fetch(`/dashboard/project/${params.id}/edit`)
    .then(response => {  return response.json()
    }).then(project => {
        console.log(JSON.stringify(project));
        this.setState({
            //project: project
            title: project.title,
            typeOfProduction: project.typeOfProduction
        })

    })
}

render() {

    return (
        <div className="EditProject"> EDIT
        <form method="POST" action="/dashboard/project/${params.id}/edit?_method=PUT">
            <div className="form-group container">
                <label className="form--title">Title</label>
                <input type="text" className="form-control " value={this.state.title} name="title" ref="title" onChange={(event)=>this.inputChangedHandler(event)}/>
            </div>
            <div className="form-group container">
                <label className="form--title">Type of Production</label>
                <input type="text" className="form-control " value={this.state.typeOfProduction} name="typeOfProduction" ref="typeOfProduction"  onChange={(event)=>this.inputChangedHandler(event)}/>
            </div>
            <div className="form-group container button">
                <button type="submit" className="btn btn-default" value="Submit" onClcik={() => onsubmit(form)}>Update</button>
            </div>
        </form>
        </div>
    );
    }
}
export default EditProject;

Erros that I have:

1- DeprecationWarning: collection.findAndModify is deprecated. Use findOneAndUpdate, findOneAndReplace or findOneAndDelete instead.

2- Inputs can't change

3- When click "Update" button:

score 1 · Answer 1 · answered Sep 25 '18 at 12:14

First of all, concerning the deprecation warning, you need to change the method findAndModify (As I do not see it here, I guess you're using it elsewhere, or maybe one of the methods you use is calling it) by one of the suggested methods and change your code accordingly.

Then, you need to learn about React and controlled components : https://reactjs.org/docs/forms.html

You need to set the component's state in your onChange handler, such as :

this.setState({
    title: event.target.value // or typeOfProduction, depending on wich element fired the event
});

This is called a controlled component in React.

Concerning the response body you get when clicking on Update button, this is actually what you asked for :

res.json(project);

returns the project variable as a JSON file, which is displayed on your screenshot.

See this question for more information about it : Proper way to return JSON using node or Express

score 1 · Accepted Answer · answered Sep 25 '18 at 12:21

I think your update override the entire object because you forgot the $set operator. This is the operator to change only the atributtes of an object and not the entire object replacing!

Example:

Model.update(query, { $set: { name: 'jason bourne' }}, options, callback)

score 0 · Answer 3 · answered Feb 25 '21 at 23:59

0

Try replace "value" in input tag with "placeholder"

answered Feb 25 '21 at 23:59

Mohannad Alhatame

1

Can't Edit and Update properties with form Reactjs and MongoDB

3 Answers3