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


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 {
            .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) {
                        status: false
                } else {
                    console.log(JSON.stringify(result) + ' 75 admin.js');
                        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 (
        <Appbar.BackAction onPress={() => navigation.openDrawer()} />
        <Appbar.Content title="Submit Complaint" />
        <Appbar.Action icon="magnify" onPress={() => navigation.openDrawer()} />
      <Text>Plese Fill the following</Text>
          label="Product ID"
          onChange={ (e) =>{
          // value={text}
        <HelperText type="error">
          {/*<HelperText type="error" visible={hasErrors()}>*/}
          Product ID Required
        onChange={ (e) =>{
        // value={text}
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>This is submittion</Text>
        <Button onPress={() => } title="Submit Complaint" />
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.


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


Leave a Reply

(*) Required, Your email will not be published