import axios from 'axios';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
function Register() {
const nevigate = useNavigate();
const AddUser = () => {
axios.post('http://localhost:3001/create', { name: name, email: email, contact: contact }).then((response) => {
console.log(response);
})
}
const getUser = async () => {
const response = await axios.get('http://localhost:3001/users')
console.log(response.data);
}
console.log(getUser());
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [contact, setContact] = useState();
return (
<div classNameName="App">
<section className="vh-100 bg-image"
style={{ backgroundImage: "url('https://mdbcdn.b-cdn.net/img/Photos/new-templates/search-box/img4.webp')" }}>
<div className="mask d-flex align-items-center h-100 gradient-custom-3">
<div className="container h-100">
<div className="row d-flex justify-content-center align-items-center h-100">
<div className="col-12 col-md-9 col-lg-7 col-xl-6">
<div className="card" style={{ borderRadius: "15px", overflow: 'hidden' }}>
<div className="card-body p-5">
<h2 className="text-uppercase text-center mb-5">Register Yourself</h2>
<form onSubmit={AddUser}>
<div className="form-outline mb-4">
<label className="form-label" for="form3Example1cg">Your Name</label>
<input type="text" id="form3Example1cg" className="form-control form-control-lg"
onChange={event => {
setName(event.target.value);
}} />
</div>
<div className="form-outline mb-4">
<label className="form-label" for="form3Example3cg">Your Email</label>
<input type="email" id="form3Example3cg" className="form-control form-control-lg"
onChange={event => {
setEmail(event.target.value);
}}
/>
</div>
<div className="form-outline mb-4">
<label className="form-label" for="form3Example3cg">Your contact number</label>
<input type="number" id="form3Example3cg" className="form-control form-control-lg"
onChange={event => {
setContact(event.target.value);
}}
/>
</div>
<div className="d-flex justify-content-center">
<button type="button"
className="btn btn-success btn-block btn-lg gradient-custom-4 text-body" onClick={() => nevigate('/ImgCards')}>Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
);
}
export default Register;
This is registration form and i am using this form when user clicks on image. after registering when user clicks on image after redirecting on page it is again asking for the registration.
How can I solve this error?