[Python] Problem with React Form and passing information to backend in Django

I have a view in Django that is responsible for booking a user a training session with a personal trainer. This view wants a full Trainer object, but the react form only passes the trainer ID to Django, despite the PrimaryKeyRelatedField attribute being set in the serializer.

This is error which i got:

Error: Cannot assign "'2'": "TrainingSession.trainer" must be a "Trainer" instance.


@api_view(["POST"])
@permission_classes([IsAuthenticated])
def create_training_session(request):
data = request.data

# Check require information
if "trainer" not in data or "date" not in data or "duration" not in data:
return Response(
{"detail": "Brak wymaganych pól."}, status=status.HTTP_400_BAD_REQUEST
)

try:
session = TrainingSession.objects.create(
trainer=data["trainer"],
client=request.user,
date=data["date"],
duration=data["duration"],
)
serializer = TrainingSessionSerializer(session, many=False)
return Response(serializer.data, status=status.HTTP_201_CREATED)
except Exception as e:
return Response({"detail": str(e)}, status=status.HTTP_400_BAD_REQUEST)


class TrainingSessionSerializer(serializers.ModelSerializer):
trainer = serializers.PrimaryKeyRelatedField(queryset=Trainer.objects.all())
client = serializers.PrimaryKeyRelatedField(queryset=User.objects.all())

class Meta:
model = TrainingSession
fields = ["id", "trainer", "client", "date", "duration", "status"]


import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {Button, Form, FloatingLabel} from "react-bootstrap";
import { bookTrainingSession, listTrainers } from '../actions/serviceActions';

const BookTrainingSessionForm = () => {
const [trainer, setTrainer] = useState('');
const [date, setDate] = useState('');
const [duration] = useState(60);

const dispatch = useDispatch();

const trainerList = useSelector((state) => state.trainerList);
const { loading: loadingTrainers, error: errorTrainers, trainers } = trainerList;

const sessionTrainingBook = useSelector((state) => state.sessionTrainingBook);
const { loading, error, success } = sessionTrainingBook;

useEffect(() => {
dispatch(listTrainers());
}, [dispatch]);

const submitHandler = (e) => {
e.preventDefault();
dispatch(bookTrainingSession({ trainer, date, duration }));
};

return (
<form onSubmit={submitHandler}>
<div>
<FloatingLabel>Trener</FloatingLabel>
{loadingTrainers ? (
<p>Loading trainers...</p>
) : errorTrainers ? (
<div>Error: {errorTrainers}</div>
) : (
<Form.Select value={trainer} onChange={(e) => setTrainer(e.target.value)} required>
<option value="">Wybierz trenera</option>
{trainers.map((trainer) => (
<option key={trainer.id} value={trainer.id}>
{trainer.name}
</option>
))}
</Form.Select>
)}
</div>
<div>
<FloatingLabel>Data</FloatingLabel>
<input type="datetime-local" value={date} onChange={(e) => setDate(e.target.value)} required />
</div>
<Button className='mt-3' type="submit" disabled={loading} variant="primary">
{loading ? 'Booking...' : 'Book Session'}
</Button>
{error && <div>Error: {error}</div>}
{success && <div>Session booked successfully!</div>}
</form>
);
};

export default BookTrainingSessionForm;

Continue reading...