Here’s my code:
export default function SignUp() {
const [user, setUser] = useState({ id: null, firstName: '', lastName: '', email: '', password: '' });
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('')
const navigate = useNavigate();
const CLIENT_URL = 'http://localhost:8080';
const isNotValid = user.firstName === '' || user.lastName === '' || user.email === '' || user.password === '';
// Handle change in form fields
const handleChange = e => {
const { name, value } = e.target;
setUser({ ...user, [name]: value })
}
// Handle submit event on form
const handleSubmit = async (event) => {
event.preventDefault();
setIsLoading(true);
setError('');
try {
// Validate form fields
if (isNotValid) {
throw new Error('All fields are required');
}
const response = await fetch(`${CLIENT_URL}/sign-up`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstName: user.firstName,
lastName: user.lastName,
email: user.email,
password: user.password
}),
});
if (!response.ok) {
throw new Error('Failed to sign up user');
}
// Process response data if needed
const responseData = await response.json();
// Navigate to overview page on successful sign up
navigate('/overview');
}
catch (error) {
setError(error.message);
} finally {
setIsLoading(false);
}
}
The API call works as intended, but the page is not being redirected.
I did this before in a previous project and it works, but now it doesn’t. Really confused and would like some help.
Is it something with the code? Or is it due to another error such as different versions of react-router-dom and such?
New contributor
Anthonyxw87 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.