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