I’m doing a form filling project that stores data from react to nodejs and then to database. I am unable to pass the data from react to node

I’m doing a form filling project that stores data from react to nodejs and then to database. I am unable to pass the data from react to node when using FORMIK I need to know what extra should I code to solve the issue
my code for your reference :

Please find the following code with the issue.

import * as yup from "yup";
import { useFormik } from "formik";
const formValidation = yup.object({
NameoftheUPSIProject: yup
.string()
.required("Fill the Name of the UPSI Project"),
InformationSharedBy: yup.string().required("Fill the Information Shared By"),
InfoSharedwithrespectto: yup.string().required("A radio option is required"),
InsiderTypes: yup.string().required("Fill the Insider Types"),
ContactPerson: yup.string().required("Fill the Contact Person"),
NameoftheOrganization: yup
.string()
.required("Fill the  Name of the Organization"),
DateofSharing: yup.string().required("Fill the Date and Time of Sharing"),
ParticularofInformationShared: yup
.string()
.required("Fill the Particular of Information Shared"),
PurposeofSharing: yup.string().required("Fill the Purpose of Sharing"),
ModeofSharing: yup.string().required("Fill the Mode of Sharing"),
});
const apple = (data) => {
console.log(data);
fetch(`localhost:5000/details`, {
method: "POST",
body: JSON.stringify(data),
headers: { "Content-Type": "application/json" },
});
};
const DetailsList = () => {
const formik = useFormik({
initialValues: {
NameoftheUPSIProject: "",
InformationSharedBy: "",
InfoSharedwithrespectto: "",
InsiderTypes: "",
ContactPerson: "",
NameoftheOrganization: "",
DateofSharing: "",
ParticularofInformationShared: "",
PurposeofSharing: "",
ModeofSharing: "",
},
validationSchema: formValidation,
onSubmit: async (values) => {
console.log(values);
try {
setloading(true);
await axios.post(`http:localhost:5000/api/detailsnewform`, values);
setloading(false);
alert("Form Created Successfully");
formik.resetForm();
} catch (error) {
console.log(error);
}
},
});
return (
<form onSubmit={formik.handleSubmit}>
<div>
<div>
{/* <div class="mb-3 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control-plaintext" id="staticEmail" value="email@example.com"/>
</div> */}
<div class="mb-3 row">
<label for="text" class="col-sm-2 col-form-label">
Name of the UPSI Project:
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword" />
</div>
</div>
<div class="mb-3 row">
<label for="inputPassword" class="col-sm-2 col-form-label">
Information Shared By:
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword" />
</div>
</div>
<div class="mb-3 row">
<label for="text" class="col-sm-2 col-form-label">
Info Shared with respect to:
</label>
<div class="col-sm-10">
<input type="radio" name="reason" value="Fit Description" />
Designated Person
<div>
<input type="radio" name="reason" value="Fit Description" />
Insider
</div>
<div>
<input type="radio" name="reason" value="Fit Description" />
UPSI Project
</div>
</div>
</div>
<div class="mb-3 row">
<label for="text" class="col-sm-2 col-form-label">
Insider Types:
</label>
<div class="col-sm-10">
<select
class="form-select form-select-lg mb-3"
aria-label=".form-select-lg example"
>
<option selected>Director</option>
<option value="1">Managing Director</option>
<option value="2">Independent Director</option>
<option value="3">CFO</option>
<option value="4">Company Secretary</option>
</select>
</div>
</div>
</div>
<div class="mb-3 row">
<label for="text" class="col-sm-2 col-form-label">
Insider Signed Confidentially Agreement:
</label>
<div class="col-sm-10">
<label
for="text"
class="col-sm-2 col-form-label"
style={{ color: "red" }}
>
No Confidentially Agreement Signed
</label>
</div>
</div>
<div class="mb-3 row">
<label for="text" class="col-sm-2 col-form-label">
Contact Person:
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword" />
</div>
<div class="mb-3 row">
<label for="text" class="col-sm-2 col-form-label">
Type of Organization:
</label>
<div class="col-sm-10">
<label for="text" class="col-sm-2 col-form-label">
Partnership
</label>
</div>
</div>
<div class="mb-3 row">
<label for="text" class="col-sm-2 col-form-label">
Name of the Organization:
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword" />
</div>
</div>
<div class="mb-3 row">
<label for="text" class="col-sm-2 col-form-label">
Date and Time of Sharing:
</label>
<div class="col-sm-10">
<input type="date" id="date" name="trip-start" />
<script src="date.js"></script>
</div>
</div>
<div class="mb-3 row">
<label for="text" class="col-sm-2 col-form-label">
Particular of Information Shared:
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword" />
</div>
</div>
<div class="mb-3 row">
<label for="text" class="col-sm-2 col-form-label">
Purpose of Sharing:
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword" />
</div>
<div class="mb-3 row">
<label for="text" class="col-sm-2 col-form-label">
Mode of Sharing:
</label>
<div class="col-sm-10">
<select
class="form-select form-select-lg mb-3"
aria-label=".form-select-lg example"
>
<option selected>Email</option>
<option value="1">Physical</option>
<option value="2">Pendrive</option>
</select>
<div class="mb-3 row">
{/* <input type="submit" value="Submit"/> */}
<button type="submit" className="button">
SUBMIT
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script></script>
</form>
);
};
export default DetailsList;

I tried using above code but unable to pass the data

This is an example of using formik

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import { Button, Grid, Typography, FormControl, InputLabel, Input, FormHelperText } from '@mui/material';
const SignupForm = () => {
return (
<div>
<Typography variant='h4' align='center' gutterBottom>
Signup
</Typography>
<Formik
initialValues={{
firstName: '',
lastName: '',
email: '',
password: '',
confirmPassword: '',
address: '',
phone: '',
}}
validationSchema={Yup.object({
firstName: Yup.string().required('First name is required'),
lastName: Yup.string().required('Last name is required'),
email: Yup.string().email('Invalid email address').required('Email is required'),
password: Yup.string()
.required('Password is required')
.min(8, 'Password is too short - should be 8 characters or longer')
.matches(
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
'Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character',
),
confirmPassword: Yup.string()
.oneOf([Yup.ref('password'), null], 'Passwords must match')
.required('Confirm password is required'),
address: Yup.string().required('Address is required'),
phone: Yup.string()
.matches(/^\+?\d{10,14}$/, 'Invalid phone number')
.required('Phone number is required'),
})}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ errors, touched, isSubmitting }) => (
<Form>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<FormControl fullWidth error={touched.firstName && !!errors.firstName}>
<InputLabel htmlFor='firstName'>First Name</InputLabel>
<Field as={Input} id='firstName' name='firstName' variant='outlined' />
<FormHelperText>
<ErrorMessage name='firstName' />
</FormHelperText>
</FormControl>
</Grid>
<Grid item xs={12} sm={6}>
<FormControl fullWidth error={touched.lastName && !!errors.lastName}>
<InputLabel htmlFor='lastName'>Last Name</InputLabel>
<Field as={Input} id='lastName' name='lastName' variant='outlined' />
<FormHelperText>
<ErrorMessage name='lastName' />{' '}
</FormHelperText>
</FormControl>
</Grid>
<Grid item xs={12}>
<FormControl fullWidth error={touched.email && !!errors.email}>
<InputLabel htmlFor='email'>Email</InputLabel>
<Field as={Input} id='email' name='email' type='email' variant='outlined' />
<FormHelperText>
<ErrorMessage name='email' />
</FormHelperText>
</FormControl>
</Grid>
<Grid item xs={12}>
<FormControl fullWidth error={touched.password && !!errors.password}>
<InputLabel htmlFor='password'>Password</InputLabel>
<Field as={Input} id='password' name='password' type='password' variant='outlined' />
<FormHelperText>
<ErrorMessage name='password' />
</FormHelperText>
</FormControl>
</Grid>
<Grid item xs={12}>
<FormControl fullWidth error={touched.confirmPassword && !!errors.confirmPassword}>
<InputLabel htmlFor='confirmPassword'>Confirm Password</InputLabel>
<Field as={Input} id='confirmPassword' name='confirmPassword' type='password' variant='outlined' />
<FormHelperText>
<ErrorMessage name='confirmPassword' />
</FormHelperText>
</FormControl>
</Grid>
<Grid item xs={12}>
<FormControl fullWidth error={touched.address && !!errors.address}>
<InputLabel htmlFor='address'>Address</InputLabel>
<Field as={Input} id='address' name='address' variant='outlined' />
<FormHelperText>
<ErrorMessage name='address' />
</FormHelperText>
</FormControl>
</Grid>
<Grid item xs={12}>
<FormControl fullWidth error={touched.phone && !!errors.phone}>
<InputLabel htmlFor='phone'>Phone</InputLabel>
<Field as={Input} id='phone' name='phone' variant='outlined' />
<FormHelperText>
<ErrorMessage name='phone' />
</FormHelperText>
</FormControl>
</Grid>
<Grid item xs={12}>
<Button variant='contained' color='primary' type='submit' disabled={isSubmitting}>
Submit
</Button>
</Grid>
</Grid>
</Form>
)}
</Formik>
</div>
);
};
export default SignupForm;

Then inside the onSubmit function you can call the backend.

here you can find the repo https://github.com/radika-insfra/formik-sample

I've checked your code the axios call should be like this,

  axios
.post(`http:localhost:5000/api/detailsnewform`, values)
.then((response) => {
console.log(response.data);
})
.catch((e) => {
console.log(e)
});

if you need help in nodejs side, please have a comment.