How to set headers in axios, ReactNative

Question

i build an application, React Native as Frontend and Django as Backend, i use axios to take data from user then send it to backend it show error Request failed with status code 400

i have used Restful API that build with django and run the server locally, so i think when i add headers to axios then the API request response without errors

so,How to set headers in axios

the user enter the data through form and send it to the backend

Add.js page with form take data from user send it to the backend

 import * as React from "react";
    import {View, Text, Image, StyleSheet, Button, TextInput} from "react-native";
    import { COLORS, SIZES,FONTS} from '../styles/theme.js';
    import { FieldArray, Formik} from "formik";
    import axios from 'axios';
    
    const AddScreen =()=>{
    
        const radioopt = [{},{},{},{}];
    
        const submit = (val) => {
            if(val.type == "" || val.category == "" || val.amount == ""){
                alert("Please Enter all details");
                return;
            }
            // 'http://192.168.8.143:8000/transactions/'
            axios.post('http://192.168.8.143:8000/transactions/', {
               
                    "id": "1",
                    "type": val?.type,
                    "category": val.category,
                    "amount": val?.amount,
                    // "owner" : "",
                    "date" : Date.now(),
              })
              .then(function (response) {
                console.log(response);
              })
              .catch(function (error) {
                console.log(error);
              });
        }
    
        return(
            <View style={{flex: 1, backgroundColor:COLORS.gray}}>
    
                <Formik
                initialValues={{type:'',category:'', amount:''}}
                onSubmit={(values)=>{submit(values)}}
                >
                    {(props)=>(
                        <View style={styles.whitecard}>
    
                            <TextInput
                            style={styles.inputstyle}
                            placeholder='type'
                            onChangeText={props.handleChange('type')}
                            value={props.values.type}
                            />
                            
                            <TextInput
                            style={styles.inputstyle}
                            placeholder='category'
                            onChangeText={props.handleChange('category')}
                            value={props.values.category}
                            />
                            <TextInput
                            style={styles.inputstyle}
                            placeholder='amount'
                            onChangeText={props.handleChange('amount')}
                            value={props.values.amount}
                            keyboardType='numeric'
                            />
        
    
                            <View style={{margin:10,padding:0, backgroundColor:COLORS.pink, borderRadius:6}}>
                            <Button title='Submit' color='white' onPress={props.handleSubmit}></Button>
    
                            </View>
    
                        </View>
                    )}
                </Formik>
    
            </View>
        );
    
    
    
    }
    
  ...
export default AddScreen;

Answer 1

You must pass an object with headers like documentation says: https://axios-http.com/docs/req_config

so your request will be:

axios.post('http://192.168.8.143:8000/transactions/',{formData}, {
   //example with bearer token
   headers: {
     'Authentication': 'Bearer 89324u2jhjwe98'
   }
})
.then(function (response) {
   console.log(response);
})
.catch(function (error) {
    console.log(error);
});

Answer 2

You can pass options on third argument. There you can add headers on post method like following:

axios.post('https://example.com', formData, { headers: 'content-type': 'text/json',...otherHeaders })