I'm using Django with React.

I'm creating a CRUD application for products. My Product table is related to the Category, Brand, Model, Quality, and Supplier tables.

I can save the data, but when I try to view it, it shows the IDs (category, brand, model, quality, supplier) instead of the names.

Here's the code.

Serializer.py

class ProductoSerializer(serializers.ModelSerializer):
  categoria = serializers.PrimaryKeyRelatedField(queryset=Categoria.objects.all())
  marca = serializers.PrimaryKeyRelatedField(queryset=Marca.objects.all())
  modelo = serializers.PrimaryKeyRelatedField(queryset=Modelo.objects.all())
  calidad = serializers.PrimaryKeyRelatedField(queryset=Calidad.objects.all())
  proveedor = serializers.PrimaryKeyRelatedField(queryset=Proveedor.objects.all())


  class Meta:
      model = Producto
      fields = [
          'id',
          'nombre',
          'precio',
          'stock',
          'categoria',
          'marca',
          'modelo',
          'calidad',
          'proveedor'
      ]

ProductoCard.jsx

import { useNavigate } from 'react-router'


export function ProductoCard({ producto}) {

    const navigate = useNavigate();

    return (
        

            
Nombre: {producto.nombre} 
 
            
Precio: {producto.precio}
            
Stock: {producto.stock}
            
Categoria: {producto.categoria}
            
Marca: {producto.marca}
            
Modelo: {producto.modelo}
            
Calidad: {producto.calidad}
            
Proveedor: {producto.proveedor}
            

        
    )

}

ProductoFormPage.jsx

import { useEffect, useState } from "react";
import { Link, useNavigate, useParams } from "react-router";
import { createProducto, getProducto, updateProducto } from "../../api/producto.api";
import { getAllCategorias } from "../../api/categoria.api";
import { getAllMarcas  } from "../../api/marca.api";
import { getAllModelos } from "../../api/modelo.api";
import { getAllCalidades } from "../../api/calidad.api";
import { getAllProveedores } from "../../api/proveedor.api";


export function ProductoFormPage() {
    
    const [productos, setProductos] = useState({
        nombre: "",
        precio: "",
        stock: "",
        categoria: "",
        marca: "",
        modelo: "",
        calidad: "",
        proveedor: "",
    });


    const [categorias, SetCategorias] = useState([]);
    const [marcas, setMarcas] = useState([]);
    const [modelos, setModelos] = useState([]);
    const [calidades, setCalidades] = useState([]);
    const [proveedores, setProveedores] = useState([]);


    const navigate = useNavigate()
    const params = useParams()

    useEffect(() => {
        const loadProducto = async () => {
            if (params.id) {
                const response = await getProducto(params.id)
                setProductos(response.data)
            }
        }

        const loadCategoria = async () => {
            const response = await getAllCategorias();
            SetCategorias(response.data);
        }

        const loadMarca = async () => {
            const response = await getAllMarcas();
            setMarcas(response.data);
        }

        const loadModelo = async () => {
            const response = await getAllModelos();
            setModelos(response.data)
        }
        
        const loadCalidad = async () => {
            const response = await getAllCalidades();
            setCalidades(response.data);
        }

        const loadProveedor = async () => {
            const response = await getAllProveedores();
            setProveedores(response.data);
        }


        loadProducto();
        loadCategoria();
        loadMarca();
        loadModelo();
        loadCalidad();
        loadProveedor();

    }, [params.id])

        

    const handleSubmint = async (e) => {
        e.preventDefault()
        

        
        if (params.id) {
            await updateProducto(params.id, productos);
        } else {
             await createProducto(productos);
        }

        navigate('/productos');
       
    };



    return (

        

            

                
Nombre:
                 setProductos({ ...productos, nombre: e.target.value })}
                    placeholder="Nombre del producto"
                    required={true}
                />
                
Precio:
                 setProductos({ ...productos, precio: e.target.value })}
                    placeholder="Precio"
                    required={true}
                />
                
Cantidad:
                 setProductos({ ...productos, stock: e.target.value })}
                    placeholder="Cantidad"
                    required={true}
                />
                
Categoría:
                 
                        setProductos({ ...productos, categoria: e.target.value })}
                >    
                    ---------Categoría---------

                    {categorias.map(categoria => (
                        
                            {categoria.nombre}    
                          
                       
                    ))}
                

                
Marca
                
                        setProductos({ ...productos, marca: e.target.value })}
                >
                    --------Marca--------

                    {marcas.map(marca => (
                        
                            {marca.nombre}
                        
                    ))}
                

                
Modelo
    
                
                        setProductos({ ...productos, modelo: e.target.value })}
                >
                    --------Modelo--------

                    {modelos.map(modelo => (
                        
                            {modelo.nombre}
                        
                    ))}
                

                
Calidad
                
                        setProductos({ ...productos, calidad: e.target.value})
                    }
                >
                    --------Calidad--------
                    {calidades.map(calidad => (
                        
                            {calidad.nombre}
                        
                    ))}

                

                
Proveedor
                
                        setProductos({ ...productos, proveedor: e.target.value})
                    }
                >
                    --------Proveedor--------
                    {proveedores.map(proveedor => (
                        
                            {proveedor.nombre}
                        
                    ))}

                
                Guardar
                Cancelar
                
                

            
        
    
    )

}

How can I make it show names instead of IDs?