title: React POST Request (MERN Stack)
body: <p>I am having trouble posting form data to MongoDB when testing on my local development environment. The endpoint that I am trying to post to is https://localhost:5000/users/add and I have been able to successfully post data to MongoDB using a REST API client and have also verified that my frontend is hooked up to my backend. I think there is something wrong with how I have setup my form, can someone please help? I am using axios library to send the request. Thank you in advance :)</p>
  <p>package.json (client side code, I have set the proxy to https://localhost:5000/):</p>
  <pre><code>{
    &quot;name&quot;: &quot;my-app&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;proxy&quot;: &quot;http://localhost:5000/&quot;,
    &quot;dependencies&quot;: {
      &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^1.2.30&quot;,
      &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^5.14.0&quot;,
      &quot;@fortawesome/react-fontawesome&quot;: &quot;^0.1.11&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^4.2.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^9.5.0&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^7.2.1&quot;,
      &quot;axios&quot;: &quot;^0.21.0&quot;,
      &quot;nodemon&quot;: &quot;^2.0.6&quot;,
      &quot;react&quot;: &quot;^16.13.1&quot;,
      &quot;react-datepicker&quot;: &quot;^3.1.3&quot;,
      &quot;react-dom&quot;: &quot;^16.13.1&quot;,
      &quot;react-hook-form&quot;: &quot;^6.8.2&quot;,
      &quot;react-images-upload&quot;: &quot;^1.2.8&quot;,
      &quot;react-modal&quot;: &quot;^3.11.2&quot;,
      &quot;react-router-dom&quot;: &quot;^5.2.0&quot;,
      &quot;react-scripts&quot;: &quot;^3.4.3&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: &quot;react-app&quot;
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    },
    &quot;devDependencies&quot;: {}
  }
  </code></pre>
  <p>ReactJS form:</p>
  <pre><code>import React, { useState } from 'react'; 
  import Modal from 'react-modal'; 
  import Exit from '../cancel.svg'; 
  import { useForm } from &quot;react-hook-form&quot;; 
  import DatePicker from &quot;react-datepicker&quot;;
  import &quot;react-datepicker/dist/react-datepicker.css&quot;;
  import { FontAwesomeIcon } from &quot;@fortawesome/react-fontawesome&quot;;
  import { faEye } from &quot;@fortawesome/free-solid-svg-icons&quot;;
  import axios from &quot;axios&quot;; 
  const eye = &lt;FontAwesomeIcon icon={faEye} /&gt;;
  
  Modal.setAppElement('#root')
  
  const Register = () =&gt; {
  
      const [modalIsOpen, setModalIsOpen] = useState (true) 
      const { register, handleSubmit, errors } = useForm ();
      const [date, setDate] = useState(new Date(&quot;06/06/1994&quot;)); 
      const onSubmit = (data) =&gt; {data['birthdate']= date; console.log(data)}; 
      const [firstName, setfirstName] = useState(&quot;&quot;); 
      const [lastName, setlastName] = useState(&quot;&quot;); 
      // const [birthdate, setbirthdate] = useState(&quot;&quot;); 
      const [gender, setGender] = useState(&quot;&quot;); 
      const [email, setemail] = useState(&quot;&quot;); 
      const [password, setpassword] = useState(&quot;&quot;); 
      const [city, setcity] = useState(&quot;&quot;); 
      const [passwordShown, setPasswordShown] = useState(false);
      const togglePasswordVisiblity = () =&gt; {
          setPasswordShown(passwordShown ? false : true);    
        };  
      
        const changeOnClick = e =&gt; {
            e.preventDefault(); 
  
            const users = {
                firstName, 
                lastName, 
                date, 
                gender, 
                email, 
                password, 
                city
            };
  
            axios
              .post(&quot;/users/add&quot;, users)
              .then(res =&gt; console.log(res.data))
              .catch(err =&gt; {
                  console.log(err); 
              }); 
        }; 
  
      return(
          &lt;Modal isOpen={modalIsOpen} onRequestClose={() =&gt; setModalIsOpen(false)} className='createBorder'&gt;
          &lt;form onSubmit={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='create-an-account'&gt;Create an account&lt;/span&gt; 
              &lt;/div&gt;
              &lt;div className='material' onSubmit={handleSubmit(onSubmit)}&gt;
                  &lt;p className='fieldsOne'&gt;First name:&lt;/p&gt;
                  &lt;input onChange={e =&gt; setfirstName(e.target.value)} name='firstName' ref={register({required: true})} className='inputs' autoComplete='off'&gt;&lt;/input&gt;
                  &lt;p className='minifields'&gt;This information will display on your profile&lt;/p&gt;
                  {errors.firstName &amp;&amp; &lt;span className='registerRequired'&gt;This field is required&lt;/span&gt;}
                  &lt;p className='fields'&gt;Last name:&lt;/p&gt;
                  &lt;input onChange={e =&gt; setlastName(e.target.value)} name='lastName' ref={register({required: true})} className='inputs' autoComplete='off'&gt;&lt;/input&gt;
                  &lt;p className='minifields'&gt;This information will display on your profile&lt;/p&gt;
                  {errors.lastName &amp;&amp; &lt;span className='registerRequired'&gt;This field is required&lt;/span&gt;}
                  &lt;p className='fields'&gt;Birthdate:&lt;/p&gt;
                      &lt;DatePicker
                          ref={register({required: true})}
                          dateFormat=&quot;MM/dd/yyyy&quot;
                          selected={date}
                          name='birthdate'
                          onChange={date =&gt; setDate(date)}
                          // onChange={e =&gt; setbirthdate(e.target.value)}
                          /&gt;           
                  &lt;p className='minifields'&gt;We'll use this information when considering what films you are qualified to test&lt;/p&gt;
                  {errors.birthday &amp;&amp; &lt;span className='registerRequired'&gt;This field is required&lt;/span&gt;}
                  &lt;p className='fields'&gt;Gender&lt;/p&gt;
                  &lt;select name='Gender' ref={register({required: false})} className='inputs' onChange={e =&gt; setGender(e.target.value)}&gt;
                      &lt;option value=&quot;&quot;&gt;Select...&lt;/option&gt;
                      &lt;option value=&quot;male&quot;&gt;Male&lt;/option&gt;
                      &lt;option value=&quot;female&quot;&gt;Female&lt;/option&gt;
                      &lt;option value=&quot;other&quot;&gt;Other&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;p className='minifields'&gt;This information will display on your profile&lt;/p&gt;
                  &lt;p className='fields'&gt;Email:&lt;/p&gt;
                  &lt;input onChange={e =&gt; setemail(e.target.value)} name='email' ref={register({required: true})} className='inputs' autoComplete='off'&gt;&lt;/input&gt;
                  &lt;p className='minifields'&gt;We'll email you when films are for screening that fits your profile&lt;/p&gt;
                  {errors.email &amp;&amp; &lt;span className='registerRequired'&gt;This field is required&lt;/span&gt;}
                  &lt;div&gt;
                      &lt;p className='fields'&gt;Password:&lt;/p&gt;
                      &lt;input onChange={e =&gt; setpassword(e.target.value)} type={passwordShown ? &quot;text&quot; : &quot;password&quot;} name='password' ref={register({required: true})} className='inputs' autoComplete='off'&gt;&lt;/input&gt;
                      &lt;i className='eye' onClick={togglePasswordVisiblity}&gt;{eye}&lt;/i&gt;
                  &lt;/div&gt;
                  &lt;p className='minifields'&gt;You'll need one of these guys to sign in later.&lt;/p&gt;
                  {errors.password &amp;&amp; &lt;span className='registerRequired'&gt;This field is required&lt;/span&gt;}
                  &lt;p className='fields'&gt;City:&lt;/p&gt;
                  &lt;input onChange={e =&gt; setcity(e.target.value)} name='city' ref={register({required: true})} className='inputs' autoComplete='off'&gt;&lt;/input&gt;
                  &lt;p className='minifields'&gt;This information will display on your profile&lt;/p&gt;
                  {errors.city &amp;&amp; &lt;span className='registerRequired'&gt;This field is required&lt;/span&gt;}
              &lt;/div&gt;
              &lt;div className='alignalign'&gt;
                  {/* &lt;button type='submit'&gt;submit&lt;/button&gt; */}
                  &lt;a href='/GetStarted/completeProfile' onClick={handleSubmit(onSubmit)} type='submit' className='signupButton'&gt;Sign Up&lt;/a&gt;
              &lt;/div&gt;
          &lt;/form&gt;
          &lt;/Modal&gt;
      )
  }
  
  export default Register; 
  </code></pre>
  <p>Express BE:</p>
  <pre><code>const express = require (&quot;express&quot;); 
  const router = express.Router(); 
  const Users = require(&quot;../models/users&quot;); 
  
  
  router.get('/', (req,res) =&gt; {
      Users.find()
          .then(user =&gt; res.json(user))
          .catch(err =&gt; res.status(400).json(`Err: ${err}`)); 
  }); 
  
  //REQUEST TO ADD NEW USER
  router.post('/add', (req, res) =&gt; {
      const newUser = new Users({
          firstName: req.body.firstName, 
          lastName: req.body.lastName, 
          birthdate: req.body.birthdate, 
          gender: req.body.gender, 
          email: req.body.email, 
          password: req.body.password, 
          city: req.body.password, 
          shareEmail: req.body.shareEmail, 
          filmmakerQuestion: req.body.filmmakerQuestion, 
          genres: req.body.genres, 
          favoriteFilms: req.body.favoriteFilms, 
          imbd: req.body.imbd, 
          portfolio: req.body.portfolio, 
          aboutYou: req.body.aboutYou, 
      })
  
      newUser.save()
      .then(() =&gt; res.json(&quot;The new User posted successfully!&quot;))
      .catch(err =&gt; res.status(400).json(`Error: ${err}`)); 
  }); 
  </code></pre>