axios duplicates post requests - node.js

Question

I am currently finishing up with a MERN system and noticed this very weird bug , when i click submit in the react page the user is saved to Mongo db , a little bit later another user is saved with the same data.
Here is my code (React frontend)
import React from "react";
import withStyles from "#material-ui/core/styles/withStyles";
import InputLabel from "#material-ui/core/InputLabel";
// core components
import GridItem from "components/Grid/GridItem.jsx";
import GridContainer from "components/Grid/GridContainer.jsx";
import CustomInput from "components/CustomInput/CustomInput.jsx";
import Button from "components/CustomButtons/Button.jsx";
import Card from "components/Card/Card.jsx";
import CardHeader from "components/Card/CardHeader.jsx";
import CardAvatar from "components/Card/CardAvatar.jsx";
import CardBody from "components/Card/CardBody.jsx";
import CardFooter from "components/Card/CardFooter.jsx";
import axios from 'axios';
import avatar from "assets/img/faces/marc.jpg";
import Styles from './Styles'
import { Form, Field } from 'react-final-form'
const styles = {
cardCategoryWhite: {
color: "rgba(255,255,255,.62)",
margin: "0",
fontSize: "14px",
marginTop: "0",
marginBottom: "0"
},
cardTitleWhite: {
color: "#FFFFFF",
marginTop: "0px",
minHeight: "auto",
fontWeight: "300",
fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
marginBottom: "3px",
textDecoration: "none"
}
};
class UserProfile extends React.Component {
onChange = (e) => {
/*
Because we named the inputs to match their
corresponding values in state, it's
super easy to update the state
*/
this.setState({ [e.target.name]: e.target.value });
console.log('data', this.state.name)
}
onSubmit = async (values , e) => {
alert('User Created ')
let data = values;
axios.post('/api/users/newuser', {data})
.then(result => console.log(result))
.catch(err => console.log(err))
}
state = {
id: '',
name: "",
address:"",
phonenumber: "",
isp: "",
account: "",
accounttype: "",
paid: '',
staticip:'',
staticipdate: Date,
bill: '',
balance: '',
username: '',
pass: '',
apip: ''
render(){
return <div>
<h1>Create New User</h1>
<h3>Unlimitik POS system V1.0</h3>
<Form
onSubmit={this.onSubmit}
initialValues={{ }}
render={({ handleSubmit, form, submitting, pristine, values }) => (
<form onSubmit={handleSubmit}>
<div>
<label>Full Name</label>
<Field
name="name"
component="input"
type="text"
placeholder="Full Name"
/>
</div>
<div>
<label>Address</label>
<Field
name="address"
component="input"
type="text"
placeholder="address"
/>
</div>
<div>
<label>Phone Number</label>
<Field
name="phonenumber"
component="input"
type="text"
placeholder="phonenumber"
/>
</div>
<div>
<label>ISP</label>
<Field
name="isp"
component="input"
type="text"
placeholder="isp"
/>
</div>
<div>
<label>Account</label>
<Field
name="account"
component="input"
type="text"
placeholder="account"
/>
</div>
<div>
<label>Account Type</label>
<Field
name="accounttype"
component="input"
type="text"
placeholder="accounttype"
/>
</div>
<div>
<label>Paid</label>
<Field
name="paid"
component="input"
type="text"
placeholder="paid"
/>
</div>
<div>
<label>Static IP</label>
<Field
name="staticip"
component="input"
type="text"
placeholder="staticip"
/>
</div>
<div>
<label>Static IP Date</label>
<Field
name="staticipdate"
component="input"
type="date"
placeholder="staticipdate"
/>
</div>
<div>
<label>Bill</label>
<Field
name="bill"
component="input"
type="text"
placeholder="bill"
/>
</div>
<div>
<label>Balance</label>
<Field
name="balance"
component="input"
type="text"
placeholder="balance"
/>
</div>
<div>
<label>username</label>
<Field
name="username"
component="input"
type="text"
placeholder="username"
/>
</div>
<div>
<label>pass</label>
<Field
name="pass"
component="input"
type="text"
placeholder="pass"
/>
</div>
<div>
<label>AP / IP</label>
<Field
name="apip"
component="input"
type="text"
placeholder="AP / IP"
/>
</div>
<div>
<label>Notes</label>
<Field name="notes" component="textarea" placeholder="Notes" />
</div>
<div className="buttons">
<button type="submit" disabled={submitting || pristine} >
Submit
</button>
<button
type="button"
onClick={form.reset}
>
Reset
</button>
</div>
<pre>{JSON.stringify(values, 0, 2)}</pre>
</form>
)}
/>
export default UserProfile;
What is happening is the request is saved in mongodb after 2 or 3 seconds ( no exact timing ) another request is send and a document is saved 2 times.
here is the route express.js
router.post('/newuser', async (req, res) => {
var x = Math.floor(Math.random() * Date.now() * 0.000000002);
const data = new User ({
id: x,
name: req.body.data.name,
address: req.body.data.address,
phonenumber: req.body.data.phonenumber,
isp: req.body.data.isp,
account: req.body.data.account,
accounttype: req.body.data.accounttype,
paid: req.body.data.paid,
staticip: req.body.data.staticip,
staticipdate: req.body.data.staticipdate,
bill: req.body.data.bill,
balance: req.body.data.balance,
username: req.body.data.username,
pass: req.body.data.pass,
apip: req.body.data.apip
} )
data.save()
.then(r => console.log(r))
.catch(err => console.log(err))
})
the log after (the ids are different since it is generated on backend not by form)

Answer 1

You seem to have 2 onSubmit handlers.
I would suggest removing one of them:
<Form
// onSubmit={this.onSubmit} <--- remove this line
initialValues={{ }}
render={({ handleSubmit, form, submitting, pristine, values }) => (
<form onSubmit={handleSubmit}>