i have integrated nodejs backend to reactjs front end - node.js

Question

hi i have integrated nodejs backend to reactjs front end. i have done these ways. but it shows error . i am new to react pls help.
function Register() {
const [data, setData] = useState({
name: "",
phone: "",
password: "",
confirmpassword: "",
});
const InputEvent = (event) => {
const { name, value } = event.target;
setData((preVal) => {
return {
...preVal,
[name]: value,
};
});
};
const formSubmit = (e) => {
e.preventDefault();
const registered = {
name: "data.name",
phone: "data.phone",
password: "data.password",
};
const isValid = formValidation();
if (isValid) {
//if form is valid, route
axios
.post(`https://localhost:5000/api/v1/auth/register/`, registered)
.then((res) => {
console.log(res);
console.log(res.data);
})
.catch((err) => {
console.log(err);
});
history.push("/myvehicles" );
}
};
return (
<div className="signup__container">
<form className="register__form" onSubmit={formSubmit}>
<h5 className="h5__form"> Name</h5>
<input
type="text"
placeholder="पुरा नाम लेख्नुहोस्"
name="name"
value={data.name}
onChange={InputEvent}
/>
);
})}
<h5 className="h5__form"> phone </h5>
<input
type="text"
placeholder="फोन लेख्नुहोस्"
name="phone"
value={data.phone}
onChange={InputEvent}
/>
);
})}
<h5 className="h5__form"> Password </h5>
<input
type="Password"
placeholder="पासवर्ड लेख्नुहोस्s"
name="password"
value={data.password}
onChange={InputEvent}
/>
);
})}
<h5 className="h5__form"> Confirm Password </h5>
<input
type="Password"
placeholder="पुन: पासवर्ड लेख्नुहोस्"
name="confirmpassword"
value={data.confirmpassword}
onChange={InputEvent}
/>
);
})}
<p>
<button type="submit" className="signup__registerButton">
Register Now
</button>
</p>
</form>
</div>
);
}
export default Register;
the code is as above when i run both backend and front end server and post values from UI. it gives error. the error comes from the post function. if i am doing wrong pls correct.

Answer 1

You can remove double quotes because you pass the wrong parameters and http instead of https in your api url.
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [data, setData] = useState({
name: "",
phone: "",
password: "",
confirmpassword: ""
});
const InputEvent = (event) => {
const { name, value } = event.target;
setData((preVal) => {
return {
...preVal,
[name]: value
};
});
};
const formSubmit = (e) => {
e.preventDefault();
const registered = {
name: data.name,
phone: data.phone,
password: data.password
};
const isValid = formValidation();
if (isValid) {
//if form is valid, route
axios
.post(`http://localhost:5000/api/v1/auth/register/`, registered)
.then((res) => {
console.log(res);
console.log(res.data);
})
.catch((err) => {
console.log(err);
});
// history.push("/myvehicles" );
}
};
return (
<div className="signup__container">
<form className="register__form" onSubmit={formSubmit}>
<h5 className="h5__form"> Name</h5>
<input
type="text"
placeholder="पुरा नाम लेख्नुहोस्"
name="name"
value={data.name}
onChange={InputEvent}
/>
<h5 className="h5__form"> phone </h5>
<input
type="text"
placeholder="फोन लेख्नुहोस्"
name="phone"
value={data.phone}
onChange={InputEvent}
/>
<h5 className="h5__form"> Password </h5>
<input
type="Password"
placeholder="पासवर्ड लेख्नुहोस्s"
name="password"
value={data.password}
onChange={InputEvent}
/>
<h5 className="h5__form"> Confirm Password </h5>
<input
type="Password"
placeholder="पुन: पासवर्ड लेख्नुहोस्"
name="confirmpassword"
value={data.confirmpassword}
onChange={InputEvent}
/>
<p>
<button type="submit" className="signup__registerButton">
Register Now
</button>
</p>
</form>
</div>
);
}

Answer 2

Firstly, try to post errors in the question itself
your code seems quite complicated for just a simple form submission
const registered = {
name: data.name,
phone: data.phone,
password: data.password,
};
Here data.name was string
For 400 bad request, check your node application have you defined any headers or any particular format, something like this you need to send
const article = { title: 'React POST Request Example' };
const headers = {
'Authorization': 'Bearer my-token',
'Content-Type': 'application/json'
};
axios.post('https://reqres.in/api/articles', article, { headers })
.then(response => this.setState({ articleId: response.data.id }));
}
Also, for httpsSSL issue means it is expecting Secure Certificate (as you cant hit https without its certificate- which is for encrypt-decrypt ) whereas for localhost try http even if getting error try your ip address and port (usually 8080)on which app is running on backend
shows while running the server on terminal itself
for pc ip address -> go to cmd-> type ipconfig