The data is storing in mongodb but i’m not able to fetch it in local host of backend .I’m keep getting this Cannot GET /api/auth/register Error in http://localhost:5000/api/auth/register
import React, { useState } from 'react';
import axios from 'axios';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser, faCalendarAlt, faEnvelope, faLock, faUserPlus } from '@fortawesome/free-solid-svg-icons';
import { useNavigate } from 'react-router-dom';
import Popup from './popup'; // Adjusted import statement
const Register = () => {
const navigate = useNavigate();
const [name, setName] = useState('');
const [dob, setDob] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [showPopup, setShowPopup] = useState(false);
const [error, setError] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
const userData = {
name,
dob,
email,
password
};
try {
const response = await axios.post('http://localhost:5000/api/auth/register', userData);
console.log('Registration successful:', response.data);
localStorage.setItem('token', response.data.token);
localStorage.setItem('user', JSON.stringify(response.data.user));
setShowPopup(true);
setTimeout(() => {
setShowPopup(false);
navigate('/');
}, 3000);
} catch (error) {
console.error('Error registering:', error.response ? error.response.data : error.message);
setError('Error registering. Please try again.');
}
};
return (
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
minHeight: '100vh',
width: '100%',
padding: '0 10px',
backgroundImage: 'url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg")',
backgroundPosition: 'center',
backgroundSize: 'cover'
}}>
<style>{`
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
.wrapper {
width: 400px;
border-radius: 8px;
padding: 30px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
h3 {
font-size: 2rem;
margin-bottom: 20px;
color: #fff;
}
.form-group {
margin-bottom: 20px;
position: relative;
display: flex;
align-items: center;
}
.form-control {
width: 100%;
padding: 12px 20px;
border: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.5);
background: transparent; /* Updated to make background transparent */
color: #fff; /* Text color white */
font-size: 16px;
outline: none;
transition: border-color 0.3s;
}
.form-control::placeholder {
color: #ccc; /* Placeholder color */
}
.form-control:focus {
border-color: #fff;
}
.form-group .icon {
margin-right: 10px;
color: #ccc;
}
.btn {
background: #fff;
color: #000;
font-weight: 600;
border: none;
padding: 12px 20px;
cursor: pointer;
border-radius: 3px;
font-size: 16px;
transition: background 0.3s, color 0.3s;
}
.btn:hover {
background: rgba(255, 255, 255, 0.8);
color: #000;
}
.register-icon {
color: #fff;
font-size: 3rem;
margin-bottom: 10px;
}
`}</style>
<div className="wrapper">
<FontAwesomeIcon icon={faUserPlus} className="register-icon" />
<h3>Register</h3>
{error && <p style={{ color: 'red' }}>{error}</p>}
{showPopup && <Popup message="Thanks for registering!" onClose={() => setShowPopup(false)} />} {/* Display popup */}
<form onSubmit={handleSubmit}>
<div className="form-group">
<FontAwesomeIcon icon={faUser} className="icon" />
<input
type="text"
className="form-control"
placeholder="Enter name"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
</div>
<div className="form-group">
<FontAwesomeIcon icon={faCalendarAlt} className="icon" />
<input
type="date"
className="form-control"
placeholder="Enter date of birth"
value={dob}
onChange={(e) => setDob(e.target.value)}
required
/>
</div>
<div className="form-group">
<FontAwesomeIcon icon={faEnvelope} className="icon" />
<input
type="email"
className="form-control"
placeholder="Enter email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</div>
<div className="form-group">
<FontAwesomeIcon icon={faLock} className="icon" />
<input
type="password"
className="form-control"
placeholder="Enter password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
<button type="submit" className="btn btn-primary btn-block">
Submit
</button>
</form>
</div>
</div>
);
};
export default Register;
This is my code of register.js i am not able to get data in local host of backend i want all the data will be display on local host api
New contributor
Mehak Manhas is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.