[Fixed] How to connect React native form to express backend

Issue

I have created a form to submit some data in react native. Now I need to connect it existing express backend. Help me to do that. I’m a beginner to react native. The following code is the backend. Now I need to submit product id and the description to the SQL server using express backend. How can I do this. my express backend can’t be change. changes should be only occur in react native code which I mentioned in the bottom of this text.

router.post('/lodge-complaint', verifyToken, verifyCustomer, async (request, response) => {

    const pool = await poolPromise;
    try {
        pool.request()
            .input('_customerEmail', sql.VarChar(50), request.payload.username)
            .input('_productID', sql.Int, request.body.productID)
            .input('_description', sql.VarChar(5000), request.body.productID)
            .execute('lodgeComplaint', (error, result) => {
                if (error) {
                    response.status(500).send({
                        status: false
                    });
                } else {
                    console.log(JSON.stringify(result) + ' 75 admin.js');
                    response.status(200).send({
                        status: true
                    });
                }
            });
    } catch (e) {
        response.status(500).send({status: false});
    }
});

And My react native form is:

import * as React from 'react';
import {Button, View, Text, ScrollView, StyleSheet} from 'react-native';
import {Appbar} from 'react-native-paper';
import {TextInput, HelperText} from 'react-native-paper';
import {useState , useEffect} from 'react';
import Axios from 'axios';
import {complaintSubmission} from '../../services/complaint-submissionService';

const ComplaintSubmission = ({navigation}) => {
  
    const [productID , setproductID] = useState("")
    const [complaintSubject , setcomplaintSubject] = useState("")
    const [description , setdescription] = useState("")

 

  return (
    <ScrollView>
      <Appbar.Header>
        <Appbar.BackAction onPress={() => navigation.openDrawer()} />
        <Appbar.Content title="Submit Complaint" />
        <Appbar.Action icon="magnify" onPress={() => navigation.openDrawer()} />
      </Appbar.Header>
      <Text>Plese Fill the following</Text>
      <View>
        <TextInput
          style={styles.PIDstyle}
          label="Product ID"
          onChange={ (e) =>{
              setproductID(e.target.value)
          }}
          // value={text}
        />
        <HelperText type="error">
          {/*<HelperText type="error" visible={hasErrors()}>*/}
          Product ID Required
        </HelperText>
      </View>
      
      <TextInput
        style={styles.PIDstyle}
        label="Description"
        onChange={ (e) =>{
            setdescription(e.target.value)
        }}
        // value={text}
      />
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>This is submittion</Text>
        <Button onPress={() => } title="Submit Complaint" />
      </View>
    </ScrollView>
  );
};
export default ComplaintSubmission;
const styles = StyleSheet.create({
  PIDstyle: {
    marginTop: 30,
    marginLeft: 10,
    marginRight: 10,
  },
});

What is the function I need to implement in React native code.

Solution

Create a new function inside your component, something like handleSubmit() and inside use axios (or fetch) to send the information to the backend, that new function should be called here <Button onPress={() => handleSubmit()} title="Submit Complaint" />.

Please see this tutorial for axios: https://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/

The function should be like:

const handleSubmit = async () => {
    const response = await axios({ 
    method: 'post',
    url: '/login',
    data: JSON.stringify({
      complainid: complainid,
      Description: description
    }));
// Handle the response

 }