Basic post request for users using express (React) - node.js

Question

I am having serious issues trying to solve this issue and any help would be appreciated greatly
So all I am trying to do is a simple register activity for users where I will be able to sign them up to the site.
I am using mssql, and express.
This is My Register.js. All I want is for the details input into the buttons to be passed through to the json body so it can then be used in my server.js.
Register.js
class AddUsers extends React.Component {
constructor() {
super();
this.state = { users: [] };
this.onSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
const data = { email: this.ref.email, password: this.ref.password };
// const data = { name: "", password: "" };
fetch("/admin-Add-Users", {
method: "POST", // or 'PUT'
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
console.log("Success:", data);
})
.catch(error => {
console.error("Error:", error);
});
}
render() {
console.log(this.state.users);
return (
<div>
<LoginForm></LoginForm>
<form onSubmit={this.onSubmit}>
<input type="text" placeholder="email" ref="email" />
<input type="text" placeholder="password" ref="password" />
<input type="submit" />
</form>
</div>
);
}
}
This is my server.js (config file is working). Here all I want is for the data previously added to be stored in my database (SQL server).
app.post("/admin-Add-Users", function(req, res) {
const { password, email } = req.body;
var request = new sql.Request();
// query to the database and get the records
request.query( "insert into Login (email, password) values ('"+email+"','"+password+"')", function(err, recordset) {
if (err) console.log(err);
});
res.send({ message: "Success" });
});
I have no idea how to get the data from the inputs to just be stored through my server.js. Please any help or examples are appreciated. I am new to react so please explain like I am five years old.
Error I am now receiving
Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method `isPropagationStopped` on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist().

Answer 1

You should try to avoid use refs in react unless you have a good reason to use them (some things like animations need to be controlled imperatively).
The React way is to do things declaratively with state, so changing an input updates the associated state field, and then the onSubmit function takes the values from state. Something like this:
class AddUsers extends React.Component {
constructor() {
super();
this.state = { users: [], email: '', password: '' };
this.onSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
const data = { email: this.state.email, password: this.state.password };
fetch("/admin-Add-Users", {
method: "POST", // or 'PUT'
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
console.log("Success:", data);
})
.catch(error => {
console.error("Error:", error);
});
}
render() {
console.log(this.state.users);
return (
<div>
<LoginForm></LoginForm>
<form>
<input type="text" placeholder="email" value={this.state.email} onChange={e =>
this.setState({email: e.target.value})} />
<input type="text" placeholder="password" value={this.state.password} onChange={e =>
this.setState({password: e.target.value})} />
<input type="submit" onPress={this.onSubmit} />
</form>
</div>
);
}
}