title: How to take input in front-end and send request to back-end?
body: <p>I am working on a basic blog application and it takes title and post input
  I am trying to take two inputs and send the request to add them to the database.
  The request is made when the user submits the form.</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  
  const CreatePost = () =&gt; {
    const [title, setTitle] = useState(&quot;&quot;);
    const [post, setPost] = useState(&quot;&quot;);
  
    const onChangeTitle = (e) =&gt; {
      setTitle(e.target.value);
    };
  
    const onChangePost = (e) =&gt; {
      setPost(e.target.value);
    };
  
    const onSubmit = (e) =&gt; {
      e.preventDefault();
      const newPost = {
        title: title,
        post: post,
      };
      console.log(newPost);
      axios(&quot;http://localhost:5000/add&quot;, newPost)
        .then((res) =&gt; console.log(res.data))
        .catch((err) =&gt; console.log(err));
    };
    return (
      &lt;form onSubmit={onSubmit} className=&quot;container&quot;&gt;
        &lt;div className=&quot;mb-3&quot;&gt;
          &lt;label className=&quot;form-label&quot;&gt;Title&lt;/label&gt;
          &lt;input onChange={onChangeTitle} className=&quot;form-control&quot;&gt;&lt;/input&gt;
        &lt;/div&gt;
        &lt;div className=&quot;mb-3&quot;&gt;
          &lt;label className=&quot;form-label&quot;&gt;Write Post&lt;/label&gt;
          &lt;textarea
            onChange={onChangePost}
            className=&quot;form-control&quot;
            rows=&quot;15&quot;
          &gt;&lt;/textarea&gt;
        &lt;/div&gt;
        &lt;button type=&quot;submit&quot;&gt;POST&lt;/button&gt;
      &lt;/form&gt;
    );
  };
  export default CreatePost;
  
  </code></pre>
  <p>The post request to add the content is:</p>
  <pre><code>app.post(&quot;/add&quot;, (req, res) =&gt; {
    const title = req.body.title;
    const post = req.body.post;
    const newPost = new Post({ title, post });
    newPost
      .save()
      .then(() =&gt; res.json(&quot;Post added&quot;))
      .catch((err) =&gt; res.status(400).json(&quot;Error:&quot; + err));
  });
  </code></pre>
  <p>Error:</p>
  <pre><code>GET http://localhost:5000/add 404 (Not Found)
  </code></pre>
  <pre><code>AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
  </code></pre>