title: 400 BAD REQUEST when POST using Axios in React
body: <p>Can any help me with this?</p>
  <p>I keep getting a 400 bad request from Axios.</p>
  <p>I can pass a GET request and confirm its working fine.</p>
  <p>I create <strong>http-common.js</strong> file with following code:</p>
  <pre><code>import axios from 'axios';
  
  export default axios.create({
      baseURL: 'https://5fa97367c9b4e90016e6a7ec.mockapi.io/api',
      headers: {
          'Content-type': 'application/json'
      }
  });
  </code></pre>
  <p>Then,I create a service that uses axios object above to send HTTP requests.</p>
  <p><strong>TodoService.js</strong></p>
  <pre><code>import http from '../http-common/http-common';
  
  const getAll=()=&gt;{
      return http.get('/todos');
  };
  
  const get=id=&gt;{
      return http.get(`/todos/${id}`);
  };
  
  const create=data=&gt; {
      return http.post('/todos',data);
  };
  
  const update=(id,data)=&gt;{
      return http.put(`/todos/${id}`,data);
  };
  
  const remove = id =&gt; {
      return http.delete(`/todos/${id}`);
    };
    
  const removeAll = () =&gt; {
      return http.delete(`/todos`);
    };
    
  const findByTitle = title =&gt; {
      return http.get(`/todos?title=${title}`);
    };
  
    export default {getAll,get,create,update,remove,removeAll,findByTitle};
  </code></pre>
  <p>Then, I use TodoDataService.create(data) ... in AddTodos component.</p>
  <p><strong>AddTodos.js</strong></p>
  <pre><code>import React, { useState } from 'react';
  import TodoDataService from '../services/TodoService';
  
  const AddTodos = () =&gt; {
  
      const initialTodoState={
          id:null,
          title: '',
          isDone: false,
          user: ''
      };
  
      const [todo,setTodo]=useState(initialTodoState);
      const [submitted,setSubmitted]=useState(false);
  
      const handleInputChange=event=&gt;{
          const {name,value}=event.target;
          setTodo({...todo,[name]:value});
      };
  
      const saveTodo =()=&gt;{
          var data={
              title: todo.title,
              isDone:todo.isDone,
              user: todo.user
              
          };
          console.log(data);
  
          TodoDataService.create(data)
          .then(response =&gt; {
              setTodo({
                  id:response.data.id,
                  title: response.data.title,
                  isDone: response.data.isDone,
                  user: response.data.user
              });
              setSubmitted(true);
              console.log(response.data);
          })
          .catch(e =&gt; {
              console.log(e);
          });
      };
  
      const newTodo=()=&gt;{
          setTodo(initialTodoState);
          setSubmitted(false);
      };
  
      return (
          &lt;div className=&quot;submit-form&quot;&gt;
        {submitted ? (
          &lt;div&gt; //...
        ) : (
          &lt;div&gt;
            &lt;div className=&quot;form-group&quot;&gt; //...  &lt;/div&gt;
            
            &lt;div className=&quot;form-group&quot;&gt; //...  &lt;/div&gt;
  
            &lt;button onClick={saveTodo} className=&quot;btn btn-success&quot;&gt;
              Submit
            &lt;/button&gt;
          &lt;/div&gt;
        )}
      &lt;/div&gt;
      )
  }
  
  export default AddTodos;
  
  </code></pre>
  <p>When clicked Submit it's giving this error:</p>
  <p><a href="https://i.stack.imgur.com/BgGww.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BgGww.jpg" alt="enter image description here" /></a></p>