title: How to create and handle a related field in django with react?
body: <p>I have created 2 models -
  Tags and Startups. Startups has a tags field with a ManytoMany relationship with Tag.</p>
  <p>Models.py file -</p>
  <p>from django.db import models
  from django_extensions.db.fields import AutoSlugField
  from django.db.models import CharField, TextField, DateField, EmailField, ManyToManyField</p>
  <pre><code>class Tag(models.Model):
  
      name = CharField(max_length=31, unique=True, default=&quot;tag-django&quot;)
      slug = AutoSlugField(max_length=31, unique=True, populate_from=[&quot;name&quot;])
  
      def __str__(self):
          return self.name
  
  
  class Startup(models.Model):
  
      name = CharField(max_length=31, db_index=True)
      slug = AutoSlugField(max_length=31, unique=True, populate_from=[&quot;name&quot;])
      description = TextField()
      date_founded = DateField(auto_now_add=True)
      contact = EmailField()
      tags = ManyToManyField(Tag, related_name=&quot;tags&quot;)
  
      class Meta:
          get_latest_by = [&quot;date_founded&quot;]
  
      def __str__(self):
          return self.name
  </code></pre>
  <p>My serializers.py file -</p>
  <pre><code>from rest_framework.serializers import HyperlinkedModelSerializer, PrimaryKeyRelatedField, ModelSerializer
  from .models import Startup, Tag
  
  
  class TagSerializer(HyperlinkedModelSerializer):
      class Meta:
          model = Tag
          fields = &quot;__all__&quot;
          extra_kwargs = {
              &quot;url&quot;: {
                  &quot;lookup_field&quot;: &quot;slug&quot;,
                  &quot;view_name&quot;: &quot;tag-api-detail&quot;
              }
          }
  
  
  class StartupSerializer(HyperlinkedModelSerializer):
      tags = TagSerializer(many=True, read_only=True)
  
      class Meta:
          model = Startup
          fields = &quot;__all__&quot;
          extra_kwargs = {
              &quot;url&quot;: {
                  &quot;lookup_field&quot;: &quot;slug&quot;,
                  &quot;view_name&quot;: &quot;startup-api-detail&quot;
              }
          }
  </code></pre>
  <p>My viewsets.py file -</p>
  <pre><code>from rest_framework.response import Response
  from rest_framework.viewsets import ModelViewSet
  from .serializers import TagSerializer, StartupSerializer
  from .models import Tag, Startup
  from rest_framework.decorators import action
  from rest_framework.status import HTTP_400_BAD_REQUEST, HTTP_200_OK, HTTP_204_NO_CONTENT
  from django.shortcuts import get_object_or_404
  
  
  class TagViewSet(ModelViewSet):
  
      queryset = Tag.objects.all()
      serializer_class = TagSerializer
      lookup_field = &quot;slug&quot;
  
  
  class StartupViewSet(ModelViewSet):
  
      serializer_class = StartupSerializer
      queryset = Startup.objects.all()
      lookup_field = &quot;slug&quot;
  
  
      @action(detail=True, methods=[&quot;HEAD&quot;, &quot;GET&quot;, &quot;POST&quot;], url_path=&quot;tags&quot;)
      def tags(self, request, slug=None):
          
          startup = self.get_object()
          print(startup)
          if request.method in (&quot;HEAD&quot;, &quot;GET&quot;):
              s_tag = TagSerializer(
                  startup.tags,
                  many=True,
                  context={&quot;request&quot;: request}
              )
              return Response(s_tag.data)
  
          tag_slug = request.data.get(&quot;slug&quot;)
          if not tag_slug:
              return Response(
                  &quot;Slug of Tag must be specified&quot;,
                  status=HTTP_400_BAD_REQUEST
              )
          tag = get_object_or_404(Tag, slug__iexact=tag_slug)
          startup.tags.add(tag)
          return Response(HTTP_204_NO_CONTENT)
  </code></pre>
  <p>I can create startups and relate tags through my django admin.
  I have a dropdown list with all the created tags in my django admin from where I can relate tags with startups.</p>
  <p>I do not understand how can I relate tags with startup when creating startup in react.
  I tried posting data in this form -</p>
  <pre><code>{
      &quot;name&quot;: &quot;Test Startup 1&quot;,
      &quot;description&quot;: &quot;First Desc&quot;,
      &quot;contact&quot;: &quot;first@gmail.com&quot;,
      &quot;tags&quot;: [
          {
              &quot;url&quot;: &quot;http://127.0.0.1:8000/api/v1/tag/first-tag/&quot;,
              &quot;name&quot;: &quot;First Tag&quot;,
              &quot;slug&quot;: &quot;first-tag&quot;
          }
      ]
  }
  </code></pre>
  <p>I cannot get the tags to relate with startup.</p>
  <p>How to handle related fields?</p>