title: Axios POST request to Mongodb not working
body: <p>I have a Sign Up modal in my React Bootstrap App to allow registration for new users. I set an onChange event for each attributes to be stored in the database and user should be saved to database if the button Sign Up is clicked, triggering the onClick button. The problem is, the user won't be saved to Mongodb at all. I'm certain the problem is within the SignUpModal code since I did try passing it via node.js on index.js and it worked. The codes are below:</p>
  <p><strong>SignUpModal.js (client side)</strong></p>
  <pre><code>
    const [userEmail, setEmail] = useState(&quot;&quot;);
    const [userPassword, setPassword] = useState(&quot;&quot;);
    const [userFullName, setFullName] = useState(&quot;&quot;);
    const [userType, setType] = useState(&quot;&quot;);
  
  //add user to database
    const addUser = () =&gt; {
      Axios.post(&quot;/addUser&quot;, {
        userEmail: userEmail,
        userPassword: userPassword,
        userFullName: userFullName,
        userType: userType,
      });
    };
  
      return(
          &lt;Modal
            {...props}
            size=&quot;lg&quot;
            aria-labelledby=&quot;contained-modal-title-vcenter&quot;
            centered
          &gt;
            &lt;Modal.Header closeButton&gt;
              &lt;Modal.Title id=&quot;contained-modal-title-vcenter&quot;&gt;
                Sign Up Form
              &lt;/Modal.Title&gt;
            &lt;/Modal.Header&gt;
            &lt;Form&gt;
            &lt;Modal.Body&gt;
                  &lt;Form.Group className=&quot;mb-3&quot; controlId=&quot;userEmail&quot;&gt;
                      &lt;Form.Label&gt;Email address&lt;/Form.Label&gt;
                      &lt;Form.Control type=&quot;email&quot; placeholder=&quot;Enter your email here&quot;  
                          onChange = {(event) =&gt; {
                            setEmail(event.target.value);
                          }}
                        /&gt;
                  &lt;/Form.Group&gt;
  
                  &lt;Form.Group className=&quot;mb-3&quot; controlId=&quot;userPassword&quot;&gt;
                      &lt;Form.Label&gt;Password&lt;/Form.Label&gt;
                      &lt;Form.Control type=&quot;password&quot; placeholder=&quot;Enter your password here&quot; 
                      onChange = {(event) =&gt; {
                        setPassword(event.target.value);
                      }}
                      /&gt;
                  &lt;/Form.Group&gt;
  
                  &lt;Form.Group className=&quot;mb-3&quot; controlId=&quot;userFullName&quot;&gt;
                      &lt;Form.Label&gt;Full Name&lt;/Form.Label&gt;
                      &lt;Form.Control type=&quot;text&quot; placeholder=&quot;Enter full name here&quot; 
                      onChange = {(event) =&gt; {
                        setFullName(event.target.value);
                      }}
                      /&gt;
                  &lt;/Form.Group&gt;
  
                  &lt;Form.Group className=&quot;mb-3&quot; controlId=&quot;formType&quot;&gt;
                      &lt;Form.Label&gt;I am a... (Tick one of the options below):&lt;/Form.Label&gt;
                      {['radio'].map((type) =&gt; (
                          &lt;div key={`inline-${type}`} className=&quot;mb-3&quot;&gt;
                          &lt;Form.Check
                              inline
                              label=&quot;Client&quot;
                              name=&quot;group1&quot;
                              type={type}
                              id={`inline-${type}-1`}
                              onChange = {(event) =&gt; {
                                setType(event.target.value);
                              }}
                          /&gt;
                          &lt;Form.Check
                              inline
                              label=&quot;Service provider&quot;
                              name=&quot;group1&quot;
                              type={type}
                              id={`inline-${type}-2`}
                              onChange = {(event) =&gt; {
                                setType(event.target.value);
                              }}
                          /&gt;
                          &lt;/div&gt;
                          ))}
                  &lt;/Form.Group&gt;
            &lt;/Modal.Body&gt;
            &lt;Modal.Footer&gt;
              &lt;Button onClick={props.onHide}&gt;Close&lt;/Button&gt;
              &lt;Button variant=&quot;primary&quot; type=&quot;submit&quot; onClick= {addUser}&gt;
                      Sign Up!
              &lt;/Button&gt;
            &lt;/Modal.Footer&gt;
            &lt;/Form&gt;
          &lt;/Modal&gt;
  )
  }
  </code></pre>
  <p><strong>index.js (server side)</strong></p>
  <pre><code>const express = require(&quot;express&quot;);
  const app = express();
  const mongoose = require(&quot;mongoose&quot;);
  const UserModel = require(&quot;./models/User&quot;);
  
  const cors = require(&quot;cors&quot;);
  
  app.use(express.json());
  app.use(cors());
  
  
  mongoose.connect(&quot;mongodb+srv://tryweb:password1234@cluster5.c58gv.mongodb.net/user?retryWrites=true&amp;w=majority&quot;, 
      {
      useNewUrlParser: true,
  });
  
  app.post(&quot;/addUser&quot;, async(req, res) =&gt; {
  
      const user = new UserModel(
          {   userEmail: req.body.userEmail, 
              userPassword: req.body.userPassword, 
              userFullName: req.body.userFullName, 
              userType: req.body.userType
          }
      );
  
      try{
          await user.save();
      }
          catch(err){
              console.log(err);
      }
  });
  
  app.listen(3000, () =&gt; {
      console.log(&quot;Server running in port 3000...&quot;);
  });
  </code></pre>
  <p>I have tried changing the URL to <code>http://localhost:3000/addUser</code> and it still does not work. Anyone knows what I am doing wrong?</p>