Pass Parameter on Axios Update Request - node.js

Question

I am trying to pass a MongoDB's ObjectId (_id) as a parameter when making an Axios update request. I have a multi-step form that I am working with; after the first step the users account is created and they are logged in. The update request is made on step 2 of the form, so at this point the user is already authenticated.
My update request is below:
const changeOnClick = e => {
const users = {
shareEmail,
filmmakerQuestion,
genres,
favoriteFilm,
imbd,
portfolio,
aboutYou
};
console.log(users)
axios
.put(`http://localhost:5000/users/update/:id`, users)
.then(res => console.log(res.body))
.catch(err => {
console.log(err);
});
NodeJs Route:
router.put('/update/:id', (req, res) => {
Users.findById(req.params.id)
.then(user => {
user.shareEmail = req.body.shareEmail;
user.filmmakerQuestion = req.body.filmmakerQuestion;
user.genres = req.body.genres;
user.favoriteFilms = req.body.favoriteFilms;
user.imbd = req.body.portfolio;
user.portfolio = req.body.portfolio;
user.aboutYou = req.body.aboutYou
user
.save()
.then(() => res.json("The User is UPDATED succesfully!"))
.catch(err => res.status(400).json(`Error: ${err}`));
})
.catch(err => res.status(400).json(`Error: ${err}`));
});
Form code (step 1):
import React, { useState, useContext } from 'react';
import Exit from '../cancel.svg';
import Modal from 'react-modal';
import { useForm } from "react-hook-form";
// import Register from './Components/register';
import axios from "axios";
// import { Redirect } from 'react-router-dom';
import { useHistory } from "react-router-dom";
import UserContext from "../context/UserContext";
Modal.setAppElement('#root');
const Profile = () => {
const [modalIsOpen, setModalIsOpen] = useState (true);
const { register, handleSubmit, errors } = useForm ();
const [shareEmail, setshareEmail] = useState();
const [filmmakerQuestion, setfilmmakerQuestion] = useState();
const [genres, setgenres] = useState();
const [favoriteFilm, setfavoriteFilm] = useState();
const [imbd, setimbd] = useState();
const [portfolio, setportfolio] = useState();
const [aboutYou, setaboutYou] = useState();
const onSubmit = (data) => console.log(data);
const { userData } = useContext(UserContext);
const history = useHistory();
const changeOnClick = e => {
const users = {
shareEmail,
filmmakerQuestion,
genres,
favoriteFilm,
imbd,
portfolio,
aboutYou
};
console.log(users)
axios
.put(`http://localhost:5000/users/${userData.user.id}`, users)
.then(res => console.log(res.body))
.catch(err => {
console.log(err);
});
history.push("/Landing/ProfilePic")
};
return(
<Modal isOpen={modalIsOpen} onRequestClose={() => setModalIsOpen(false)} className='createBorder'>
<form onSubmit={handleSubmit(changeOnClick)} encType="multipart/form-data" >
<div className='border-bottom'>
<img onClick= {() => setModalIsOpen(false)} src={Exit} className='exitButton-two' alt='X' />
<span className='complete-profile'>Complete your profile</span>
</div>
<div>
<p className='filmmakerQ'>Please mark if your email can be shared with filmmakers:</p>
<div className='shareblock'>
<input onChange={e => setshareEmail(e.target.value)} ref={register({required: false})} className='sharePosition' type="radio" htmlFor='shareEmail' value='yes' name="shareEmail"/>
<label htmlFor='shareEmail'>Yes, share my email with filmmakers</label>
</div>
<div className='shareblock'>
<input onChange={e => setshareEmail(e.target.value)} ref={register({required: false})} className='sharePosition' type="radio" htmlFor='noShare' value='no' name="shareEmail"/>
<label htmlFor='noShare'>No, do not share my email</label>
</div>
<p className='filmmakerQ'>Are you a filmmaker?</p>
<div className='shareblock'>
<input onChange={e => setfilmmakerQuestion(e.target.value)} ref={register({required: false})} className='sharePosition' type="radio" htmlFor='yesFilmmaker' value='yes' name="filmmakerQuestion" />
<label htmlFor='yesFilmmaker'>Yes, I am a filmmaker</label>
</div>
<div className='shareblock'>
<input onChange={e => setfilmmakerQuestion(e.target.value)} ref={register({required: false})} className='sharePosition' type="radio" htmlFor='noFilmmaker' value='no' name="filmmakerQuestion" />
<label htmlFor='noFilmmaker'>No, I am not a filmmaker</label>
</div>
<p className='filmmakerQ'>What genres of film do you like? Check all that apply:</p>
<div>
<div className='shareBox'>
<input onChange={e => setgenres(e.target.value)} ref={register({required: false})} value='horror' type="checkbox" htmlFor='horror' name="genres" />
<label htmlFor='horror' className='move'>Horror</label>
<input onChange={e => setgenres(e.target.value)} ref={register({required: false})} value='animation' type="checkbox" htmlFor='animation' name="genres" />
<label htmlFor='animation'>Animation</label>
</div>
<div className='shareBox'>
<input onChange={e => setgenres(e.target.value)} ref={register({required: false})} value='drama' type="checkbox" name="genres" />
<label htmlFor='drama' className='move'>Drama</label>
<input onChange={e => setgenres(e.target.value)} ref={register({required: false})} value='comedy' type="checkbox" htmlFor='comedy' name="genres" />
<label htmlFor='comedy' className='move'>Comedy</label>
</div>
</div>
<div>
<div className='shareBox'>
<input onChange={e => setgenres(e.target.value)} ref={register({required: false})} value='action' type="checkbox" htmlFor='action' name="genres" />
<label htmlFor='action' className='move'>Action</label>
<input onChange={e => setgenres(e.target.value)} ref={register({required: false})} value='documentary' type="checkbox" htmlFor='documentary' name="genres" />
<label htmlFor='documentary'>Documentary</label>
</div>
<div className='shareBox'>
<input onChange={e => setgenres(e.target.value)} ref={register({required: false})} value='scifi' type="checkbox" htmlFor='scifi' name="genres" />
<label htmlFor='scifi' className='movemore'>Sci-Fi</label>
<input onChange={e => setgenres(e.target.value)} ref={register({required: false})} value='expriemental' type="checkbox" name="genres" />
<label htmlFor='experimental'>Experimental</label>
</div>
</div>
<p className='filmmakerQ'>What are your favorite films?</p>
<input ref={register({required: false})} onChange={e => setfavoriteFilm(e.target.value)} className='inputsThree' name='favoriteFilm' autoComplete='off'></input>
<p className='minifieldsNew'>These will be shared to your profile.</p>
<p className='filmmakerQ'>Please share a link to your IMBD profile if available:</p>
<input ref={register({required: false})} onChange={e => setimbd(e.target.value)} className='inputsThree' name='imbd' autoComplete='off'></input>
<p className='minifieldsNew'>If you are a filmmaker, our community is very interested to learn more about what projects you have been a part of. This will be shared on your profile</p>
<p className='filmmakerQ'>If you have a link to a portfolio please share below:</p>
<input ref={register({required: false})} onChange={e => setportfolio(e.target.value)} className='inputsThree' name='portfolio' autoComplete='off'></input>
<p className='minifieldsNew'>This is your chance to show your work. This will be shared on your profile</p>
<p className='filmmakerQ'>Anything else you want to share about yourself?</p>
<input ref={register({required: false})} onChange={e => setaboutYou(e.target.value)} className='inputsThree' name='aboutYou' autoComplete='off'></input>
<p className='minifieldsNewNew'>Our community is very interested in learning more about you as a filmmaker</p>
</div>
<div>
<button type='submit' className='signupButton3'>Sign Up</button>
{/* <a onClick={handleSubmit(onSubmit)} type='submit' className='doneButtontwo'>
<span>Done</span>
</a> */}
<div>
<a href='/GetStarted' className='later'>I'll do this later</a>
</div>
</div>
</form>
</Modal>
)
}
export default Profile;
Form code (step 2):
<form onSubmit={handleSubmit(changeOnClick)} encType="multipart/form-data" >
<div className='border-bottom'>
<img onClick= {() => setModalIsOpen(false)} src={Exit} className='exitButton-two' alt='X' />
<span className='complete-profile'>Complete your profile</span>
</div>
<div>
<p className='filmmakerQ'>Please mark if your email can be shared with filmmakers:</p>
<div className='shareblock'>
<input onChange={e => setshareEmail(e.target.value)} ref={register({required: false})} className='sharePosition' type="radio" htmlFor='shareEmail' value='yes' name="shareEmail"/>
<label htmlFor='shareEmail'>Yes, share my email with filmmakers</label>
</div>
<div className='shareblock'>
<input onChange={e => setshareEmail(e.target.value)} ref={register({required: false})} className='sharePosition' type="radio" htmlFor='noShare' value='no' name="shareEmail"/>
<label htmlFor='noShare'>No, do not share my email</label>
</div>
<p className='filmmakerQ'>Are you a filmmaker?</p>
<div className='shareblock'>
<input onChange={e => setfilmmakerQuestion(e.target.value)} ref={register({required: false})} className='sharePosition' type="radio" htmlFor='yesFilmmaker' value='yes' name="filmmakerQuestion" />
<label htmlFor='yesFilmmaker'>Yes, I am a filmmaker</label>
</div>
<div className='shareblock'>
<input onChange={e => setfilmmakerQuestion(e.target.value)} ref={register({required: false})} className='sharePosition' type="radio" htmlFor='noFilmmaker' value='no' name="filmmakerQuestion" />
<label htmlFor='noFilmmaker'>No, I am not a filmmaker</label>
</div>
<p className='filmmakerQ'>What genres of film do you like? Check all that apply:</p>
<div>
<div className='shareBox'>
<input onChange={e => setgenres(e.target.value)} ref={register({required: false})} value='horror' type="checkbox" htmlFor='horror' name="genres" />
<label htmlFor='horror' className='move'>Horror</label>
<input onChange={e => setgenres(e.target.value)} ref={register({required: false})} value='animation' type="checkbox" htmlFor='animation' name="genres" />
<label htmlFor='animation'>Animation</label>
</div>
<div className='shareBox'>
<input onChange={e => setgenres(e.target.value)} ref={register({required: false})} value='drama' type="checkbox" name="genres" />
<label htmlFor='drama' className='move'>Drama</label>
<input onChange={e => setgenres(e.target.value)} ref={register({required: false})} value='comedy' type="checkbox" htmlFor='comedy' name="genres" />
<label htmlFor='comedy' className='move'>Comedy</label>
</div>
</div>
<div>
<div className='shareBox'>
<input onChange={e => setgenres(e.target.value)} ref={register({required: false})} value='action' type="checkbox" htmlFor='action' name="genres" />
<label htmlFor='action' className='move'>Action</label>
<input onChange={e => setgenres(e.target.value)} ref={register({required: false})} value='documentary' type="checkbox" htmlFor='documentary' name="genres" />
<label htmlFor='documentary'>Documentary</label>
</div>
<div className='shareBox'>
<input onChange={e => setgenres(e.target.value)} ref={register({required: false})} value='scifi' type="checkbox" htmlFor='scifi' name="genres" />
<label htmlFor='scifi' className='movemore'>Sci-Fi</label>
<input onChange={e => setgenres(e.target.value)} ref={register({required: false})} value='expriemental' type="checkbox" name="genres" />
<label htmlFor='experimental'>Experimental</label>
</div>
</div>
<p className='filmmakerQ'>What are your favorite films?</p>
<input ref={register({required: false})} onChange={e => setfavoriteFilm(e.target.value)} className='inputsThree' name='favoriteFilm' autoComplete='off'></input>
<p className='minifieldsNew'>These will be shared to your profile.</p>
<p className='filmmakerQ'>Please share a link to your IMBD profile if available:</p>
<input ref={register({required: false})} onChange={e => setimbd(e.target.value)} className='inputsThree' name='imbd' autoComplete='off'></input>
<p className='minifieldsNew'>If you are a filmmaker, our community is very interested to learn more about what projects you have been a part of. This will be shared on your profile</p>
<p className='filmmakerQ'>If you have a link to a portfolio please share below:</p>
<input ref={register({required: false})} onChange={e => setportfolio(e.target.value)} className='inputsThree' name='portfolio' autoComplete='off'></input>
<p className='minifieldsNew'>This is your chance to show your work. This will be shared on your profile</p>
<p className='filmmakerQ'>Anything else you want to share about yourself?</p>
<input ref={register({required: false})} onChange={e => setaboutYou(e.target.value)} className='inputsThree' name='aboutYou' autoComplete='off'></input>
<p className='minifieldsNewNew'>Our community is very interested in learning more about you as a filmmaker</p>
</div>
<div>
<button type='submit' className='signupButton3'>Sign Up</button>
{/* <a onClick={handleSubmit(onSubmit)} type='submit' className='doneButtontwo'>
<span>Done</span>
</a> */}
<div>
<a href='/GetStarted' className='later'>I'll do this later</a>
</div>
</div>
</form>
Use insomnia I see that the update endpoints work; additionally I see that if I manually take a userId and use it instead of the ":id" in the axios request, then the PUT request will update successfully.
If I send the form data right now on my local environment the network response is:
"Error: CastError: Cast to ObjectId failed for value \":id\" at path \"_id\" for model \"Users\""
I appreciate the help!