title: Posting Form data as json to nested serializer from ReactJS
body: <p>I am getting this error <code>{"user":["This field is required."]}</code> in reactjs when posting data to an endpoint which has the following serializer</p>
  
  <pre><code>class ProfileSerializer(serializers.ModelSerializer):
      user = UserProfileSerializer()
  
      class Meta:
          model = models.Profile
          fields = ['user',
                    'address',
                    'city',
                    'country',
                    'user_type',
                    'telephone_Number',
                    'organisation_name',
                    ]
  
      def create(self, validated_data):
          print(validated_data)
          user_data = validated_data.pop('user')
          user = UserProfile.objects.create(**user_data)
          profile = Profile.objects.create(user=user, **validated_data)
          return profile
  </code></pre>
  
  <p>On the network tab of the browser i can see all the data is captured as shown</p>
  
  <pre><code>user: [{"name":"Testing user"},{"email":"test@gmail.com"},{"password":"*****"},{"is_active":true}]
  user_type: 2
  organisation_name: Testing company
  address: N/A
  city: N/A
  country: Test
  telephone_Number: 8888763
  </code></pre>
  
  <p>This is how i am posting the data from reactjs</p>
  
  <pre><code> let data = this.state.data;
        let user = [
          { name: data.name },
          { email: data.email },
          { password: data.password },
          { is_active: data.is_active },
        ];
        let form_data = new FormData();
        form_data.append("user", JSON.stringify(user));
        form_data.append("user_type", data.user_type.value);
        form_data.append("organisation_name", data.organisation_name);
        form_data.append("address", data.address);
        form_data.append("city", data.city);
        form_data.append("country", data.country);
        form_data.append("telephone_Number", data.telephone_Number);
        await saveUser(form_data);
  </code></pre>
  
  <p><strong>Edits</strong>
  Upon further checks i am noticing the issue is on this <code>await saveUser(form_data);</code>
  The data object on the http post requst is empty as shown <code>data: FormData {}</code> So the issue seems to be how to convert form data to json object. How do i convert this?
  <strong>Please help</strong>  what could be wrong with this? Kindly assist</p>