How to connect React native form to express backend - mysql

Question

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.

Answer 1

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
}