Posting Form data as json to nested serializer from ReactJS - reactjs

Question

I am getting this error {"user":["This field is required."]} in reactjs when posting data to an endpoint which has the following serializer
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
On the network tab of the browser i can see all the data is captured as shown
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
This is how i am posting the data from reactjs
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);
Edits
Upon further checks i am noticing the issue is on this await saveUser(form_data);
The data object on the http post requst is empty as shown data: FormData {} So the issue seems to be how to convert form data to json object. How do i convert this?
Please help what could be wrong with this? Kindly assist

Answer 1

FormData was really causing me lots of problem My problem was the format i was using to post data to the server. I created javascript objects from my state objects and i was able to successfully post data to the server as shown below. I had to give an answer so that if in future someone encounters same issue, s/he doesn't suffer like i did. lol
let data = this.state.data;
let user = {
name: data.name,
email: data.email,
password: data.password,
is_active: data.is_active,
};
const userData = {
user,
organisation_name: data.organisation_name,
name: data.name,
address: data.address,
city: data.city,
country: data.country,
telephone_number: data.telephone_Number,
user_type: data.user_type.value,
};
await saveUser(userData);