Sending data from React form to Django Rest Framework without a Model

Here are the steps to configure your React front-end with Django REST backend.

Django Settings:

1. Install django-cors-headers with the following command:

pip install django-cors-headers

2. Add it to your project settings.py file:

INSTALLED_APPS = (
    ##...
    'corsheaders'
)

3. Next, you need to add corsheaders.middleware.CorsMiddleware to the middleware classes in settings.py

MIDDLEWARE = [
    # corsheaders middleware
    'corsheaders.middleware.CorsMiddleware',
    ...
]

4. You should allow the hosts in settings.py from where you want to get data. At the initial stage allow *

ALLOWED_HOSTS = [*]

React Settings:

5. Install axios using the following command:

npm i axios

6. Now follow the example in below for the React class.

import React from "react";
...
import Axios from "axios";
...


yourFunctionName = () => {

    Axios.post(`URL`, {
            'partnerName': this.state.firmName,
            'timeframes': this.state.timeframes,
            'numberOfResults': this.state.numberOfResults,
        },
        {
            headers: {
                "Authorization": `AUTHORIZATION_KEY`,
                "Content-Type": 'application/json'
            }
        }
    )
    .then(res => console.log(res))
    .catch(error => console.err(error))
}

Fatima's answer is excellent enough. I am adding here some extra thing that you wanted to know in comment.

Basically you don't need to catch the data manually and save it into database. Django gives us extreme flexibility. If your model, serializer and view are like below then any axios request will be handled by django itself (i.e, django catches the data and saves it into database), you don't need to write code for manually save it into database.

Model

class Partner(models.Model):
    partnerName =  models.CharField(max_length=100)
    timeFrames = models.IntegerField()
    numberOfResults = models.IntegerField()

Serializer

class PartnerSerializer(serializer.ModelSerializer):
    class Meta:
        model=Partner
        fields = '__all__'

Views

class PartnerView():
    queryset = Partner.object.all()
    serializer_class = PartnerSerializer

If you still want to catch the data inside the view and modify in your way then just add built in function create() (builtin function of ModelViewSet) in your view class. If you want to modify the data inside serializer instead of view then add the builtin create() function (built in function of ModelSerializer) in your serializer.

The mentioned built in function (and also many more built in function) can be found in this website http://www.cdrf.co/

Exact url of create() function of view is this and

Exact url of create() function of serializer is this

See the code below of customization.

Customized Views

class PartnerView():
    queryset = Partner.object.all()
    serializer_class = PartnerSerializer

    def create(self, request, *args, **kwargs):        
        serializer = self.get_serializer(data=request.data)        
        serializer.is_valid(raise_exception=True)

        # Here all incoming data we kept in serializer variable.
        # Change the data in your way and then pass it inside perform_create()

        self.perform_create(serializer)
        headers = self.get_success_headers(serializer.data)
        return Response(
           data={
               "status": 201,
               "message": "Product Successfully Created",                
               "data": serializer.data,                
               },
               status=status.HTTP_201_CREATED,
               headers=headers
           )

If you want to modify the data inside the serializer then use the below code.

Customized Serializer

    class PartnerSerializer(serializer.ModelSerializer):

        class Meta:
            model = Partner
            fields = '__all__'

        def create(self, validated_data):
            my_incoming_data = validated_data

            # If you want to pop any field from the incoming data then you can like below.
            # popped_data = validated_data.pop('timeFrames')

            inserted_data = Partner.objects.create(**validated_data)

            return Response(inserted_data)

if you are trying to send data with react and fetch to an APIView in Django, the only thing you need to do is to remove the Content-Type header from fetch headers, so the DRF would set it, and you can access files and data from request.data.

DRF APIView:

class ImportProductsAPI(APIView):
    authentication_classes = (TokenAuthentication,)
    permission_classes = (IsAuthenticated, IsAdmin)

    def put(self, request):
        # you can pass other data as well as files too.
        site_id = request.data["site_id"]
        # and there is the file you want
        file = request.data["excel"]
        return JsonReponse()

Fetch (in react project)

let formData = new FormData();
formData.append("excel", file);
formData.append("site_id", site_id);

fetch(
    "api/for/upload", 
    {    
      method: "PUT",
      headers: {
        Accept: "application/json",
        Authorization: "token thisisthetokenforthisuser",
        // consider that there is no Content-Type being setted.
        },
      body: formData,
    })
      .then((response) => {
        return response.json();
      })
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.error(error);
      });