I recently developed a React + Django application and implemented a basic CRUD feature. Everything was working smoothly until I encountered an issue while creating a project and storing it in the Django database. When I view the project at projects/list, only the delete button and image field are displayed, which is not what I intended. I specifically want the title and body fields to be visible.
This snippet is from 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"),
]
Also, let's take a look at 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"
},
project: {
"title": title,
"body": 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
Last but not least, let's check ProjectViewSet in view.py
class ProjectView(viewsets.ModelViewSet):
queryset = Project.objects.all()
serializer_class = ProjectSerializer
I expected the title and body fields along with their content to be displayed on the created project page.