title: 500 (Internal Server Error) when fetching from Django Rest API default router (to create object)
body: <p>I am trying to make Django and React to work together, and although I have a basic knowledge of Django (I can develop a site), I am just starting to learn React.</p>
  
  <p>My project structure is based on <a href="https://www.youtube.com/watch?v=Uyei2iDA4Hs&amp;t=10s" rel="nofollow noreferrer">this video</a> which is loosely based on <a href="https://www.valentinog.com/blog/drf/" rel="nofollow noreferrer">this blog</a> in turn.</p>
  
  <p>My API works perfectly fine, I can create, retrieve, update, and delete objects without problems.</p>
  
  <p>Also, on my frontend, I have managed to correctly display a list of the items from my database, by fetching the related API Url.</p>
  
  <p>Just to make it clear, here is the main 'backend' <code>urls.py</code>:</p>
  
  <pre><code>from rest_framework import routers
  from .views import AssessmentViewSet
  
  router = routers.DefaultRouter()
  router.register('api/assessments', AssessmentViewSet, 'assessments')
  
  urlpatterns = router.urls
  </code></pre>
  
  <p>Now, from what I see on my API webpage, objects are created and retrieved on the same Url, and namely <code>http://127.0.0.1:8000/api/assessments/</code>, as you can see from this screenshot.</p>
  
  <p><a href="https://i.stack.imgur.com/5mjCt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5mjCt.png" alt="enter image description here"></a></p>
  
  <p>The only difference, I guess, is that when I want to create an object, all I have to do ist to specify inside the <code>fetch</code> function, that I am making a <code>POST</code> request. This is done in my <code>CreateAssessmentForm.jsx</code> file:</p>
  
  <pre><code>import React, { Component } from "react";
  
  class CreateAssessmentForm extends Component {
    state = {
      loading: false,
      title: "",
      is_finished: false,
      created_at: "",
    };
  
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      let value = event.target.value;
      console.log("Value: ", value);
      this.setState({
        title: value,
      });
    }
  
    handleSubmit(event) {
      event.preventDefault(console.log("Item:", this.state));
      fetch("http://127.0.0.1:8000/api/assessments", {
        method: "POST",
        headers: {
          "Content-type": "application/json",
        },
        body: JSON.stringify(this.state.title),
      }).then(response =&gt; {
        this.setState({
          loading: false,
          title: "",
          is_finished: false,
          created_at: "",
        }).catch(function (error) {
          console.log("ERROR:", error);
        });
      });
    }
  
    render() {
      return (
        &lt;div&gt;
          {this.state.loading ? (
            &lt;div className="text-center"&gt;Loading...&lt;/div&gt;
          ) : (
            &lt;form onSubmit={this.handleSubmit} method="POST"&gt;
              &lt;h2 className="text-center"&gt;Assessment Title&lt;/h2&gt;
              &lt;div className="form-group"&gt;
                &lt;label htmlFor="Title"&gt;Title&lt;/label&gt;
                &lt;input
                  onChange={this.handleChange}
                  type="text"
                  className="form-control"
                  id="TitleInput"
                  value={this.state.title}
                  placeholder="E.g. History Quiz"
                /&gt;
              &lt;/div&gt;
              &lt;button type="submit" className="btn btn-primary"&gt;
                Submit
              &lt;/button&gt;
            &lt;/form&gt;
          )}
        &lt;/div&gt;
      );
    }
  }
  
  export default CreateAssessmentForm;
  </code></pre>
  
  <p>When I type something inside the <code>title</code> input, the console logs properly every entry, and when I press the submit <code>button</code> it also logs an object (which as you can see from the code above is my actual <code>state</code> - <code>{this.state}</code>). </p>
  
  <p>The problem is that when submitting, I get a <code>500 (Internal Server Error)</code> and the object is not saved on the backend database.</p>
  
  <p>Does anyone know what I am doing wrong?</p>