title: Django, DRF (& React) Foreign key, how to display the name value instead of the foreign key id
body: <p>There are two Django models - ClientCompany &amp; Proposal and the foreign key of ClientCompany is within the Proposal model. In Proposal how do I display the name of the ClientCompany instead of the foreign key id? </p>
  
  <p>models.py:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class ClientCompany(models.Model):
      name = models.CharField("Client Name", max_length=255)
      abn_acn = models.BigIntegerField("ABN / ACN")
  
      def __str__(self):
          return self.name
  
  class Proposal(models.Model):
      proj_name = models.CharField("Project Name", max_length=255)
      loc_state = models.CharField(
          max_length=3,
      )
      proj_type = models.CharField(
          max_length=30,
      )
      prop_status = models.CharField(
          max_length=20,
      )
      client = models.ForeignKey(ClientCompany, on_delete=models.CASCADE)
      oneic = models.ForeignKey(
          User, on_delete=models.CASCADE, related_name='main_engineer')
      twoic = models.ForeignKey(
          User, on_delete=models.CASCADE, related_name='second_engineer')
      created_at = models.DateTimeField(default=datetime.now)
  
      def __str__(self):
          return self.proj_name</code></pre>
  </div>
  </div>
  </p>
  
  <p>serializers.py:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class ClientSerializer(serializers.ModelSerializer):
      class Meta:
          model = ClientCompany
          fields = ('id', 'name', 'abn_acn')
  
  
  class ProposalSerializer(serializers.ModelSerializer):
  
      class Meta:
          model = Proposal
          fields = ('id', 'proj_name', 'loc_state', 'proj_type', 'prop_status', 'client', 'oneic', 'twoic',)</code></pre>
  </div>
  </div>
  </p>
  
  <p>queryset api.py:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class ProposalViewSet(viewsets.ModelViewSet):
      permission_classes = [permissions.IsAuthenticated, ]
      queryset = Proposal.objects.all()
      serializer_class = ProposalSerializer</code></pre>
  </div>
  </div>
  </p>
  
  <p>currently<a href="https://i.stack.imgur.com/YJxoz.png" rel="nofollow noreferrer">shows the client foreign key id</a></p>
  
  <p>I've been stuck on this, tried to apply the existing solutions recommended for similar problems but had no luck... if someone can tell me what I'm missing - thanks</p>