Project created but its fields are empty when sent from React to Django API

Question

I’ve been working on this React + Django APP. And I have been making a simple CRUD functionality into this app. everything goes fine but when i came to create project and send it to the django database, it gets created but when i look at it at projects/list it only shows the delete button and and image field which is not important, i only want the title and body fields to be shows

This is views.py

class CreateProjectView(viewsets.ModelViewSet):
    serializer_class = ProjectSerializer

    def post(self, request):
        project = ProjectSerializer(data=request.data)
        if project.is_valid(raise_exception=True):
            project.save()
            return Response(project.data)

urls.py

create_project = CreateProjectView.as_view({"get": "post"})
urlpatterns = [
   path("project/create", create_project, name="create-project"),
]

Now React CreateProject.js

import React, { useState } from 'react'

const CreateProject = () => {

    let [project, setProject] = useState([])
    
    let [title, setProjectTitle] = useState("")
    let [body, setProjectBody] = useState("")
    
    const handleChangeTitle = (value) => {
        setProjectTitle(project => ({ ...title, 'title': value}))
        console.log("Title:", value)
    }
    
    const handleChangeBody = (value) => {
        setProjectBody(project => ({ ...body, 'body': value}))
        console.log("Body: ", value)
    }


    let createProject = async () => {
        fetch('http://localhost:8000/api/project/create', {
            method: "POST",
            headers: {
                'Content-Type': "application/json"
            },
            // title: JSON.stringify(project_title),
            // title: project_title,
            // body: project_body,
            // image: "hello",
            // title: title,
            // body: body
            project: {
                "title": title,
                "body": body
            }
            // project:  project.title
        },
        )
        // let project = {project_title, project_body}
    }
    
    let handleSubmit = () => {
        setProject(project)
        
        createProject()
    }

  return (
    <div>
        <h3>title</h3>
        <input type="text" name="title" onChange={e => {handleChangeTitle(e.target.value)}} defaultValue={project?.title} />
        <br />
        <h3>body</h3>
        <input type="text" name="body" onChange={e => {handleChangeBody(e.target.value)}} defaultValue={project?.body} />
        <br/>
        <br/>
        <br/>
        
        <button onClick={createProject}>submit</button>
    </div>
  )
}

export default CreateProject

ProjectViewSet in view.py

class ProjectView(viewsets.ModelViewSet):
    queryset = Project.objects.all()
    serializer_class = ProjectSerializer

I was expecting it to show the title and body fields and they content that were created in the create project page

Asked By: Amine Khiari

||

Source

Answer 1

I tried a lot of solutions but nothing worked. It turns out the problem in in the CreateProject.js components where the createProject() is.
so this is how i fixed it:
At first I was just sending the data fields like this:

title: project.title,
body: project.body,

but I should have been:

body: JSON.stringify({
  title: project.title,
  body: project.body,
})

I tried removing the JSON.stringify and leaving it just a {} like this

body: {
  title: project.title,
}

but It has to be this way.
Anyways this is the correct way to send POST requests from React to Django uing React Functions

let updateProject = async () => {
        fetch(`http://localhost:8000/api/project/update/${projectId}`, {
            method: "PUT",
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                title: project.title,
                body: project.body
            })
        })
    }

Answered By: Amine Khiari

Project created but its fields are empty when sent from React to Django API

Question:

Answers: