I cant navigate to next Page after an api request using axios in react

Issue

This Content is from Stack Overflow. Question asked by Stanley Omeje

am trying to create a registration function that post to my server using axios. Am using react for the client. the information get posted to the server but it just wouldn’t execute the next line of code which is to navigate to another page and also store the data return into a local storage. pls how do i make it to execute the next line of code. i noticed that if i remove the axios request it will execute the next line of code so it seems that once it makes the post request it will return out of the function.. pls can someone show me what i could do to get it working. below is the function. everything works fine but after the axios request it seems to return out of the function.

const handleSubmit = async (e)=>{
        e.preventDefault();
       
        if(handleValidation()){
            const {password,confirmPassword,username,email} = values;
            console.log("stanley")
            const {data} = await axios.post(registerRoute,{
                username,
                email,
                password
            })

            //starting from this line doesn't get executed

            navigate('/');  
             if(data){
                 localStorage.setItem("chat-app-user",JSON.stringify(data.user));
                
             }
        }
    }

am using sqlite3 for the database.. below is the whole registeration component

import React from 'react'
import {useState,useEffect} from 'react'
import styled from "styled-components"
import {Link,useNavigate} from 'react-router-dom'
import {ToastContainer,toast} from 'react-toastify'
import "react-toastify/dist/ReactToastify.css"
import axios from "axios"
import { registerRoute } from '../utils/APIRoutes'
function Register() {
    const navigate = useNavigate()
    const [values,setValues]=useState({
        username:"",
        email:"",
        password:"",
        confirmPassword:"",
    })
    const toastOptions = {
    
            position:"bottom",
            autClose:8000,
            pauseOnHover:true,
            draggable:true,
            theme:'dark'
    
    }
    const handleSubmit = async (e)=>{
        e.preventDefault();
       
        if(handleValidation()){
            const {password,confirmPassword,username,email} = values;
            console.log("stanley")
            const {data} = await axios.post(registerRoute,{
                username,
                email,
                password
            })
            
            navigate('/');
            // if(data){
            //     localStorage.setItem("chat-app-user",JSON.stringify(data.user));
                
            // }
        }
    }
    const handleChange =(e)=>{
        setValues({...values,[e.target.name]: e.target.value})
    }
    const handleValidation =()=>{
        const {password,confirmPassword,username,email} = values;
        if(password!==confirmPassword){
            toast.error('password and confirm password should be same',toastOptions)
            return false
        }
        return true
    }
  return (
    <>
        {/* <FormContainer> */}
            <form onSubmit={(e)=>handleSubmit(e)}>
                <h1>Register</h1>
                <div>
                    <input
                    type='text'
                    placeholder="Username"
                    name = "username"
                   onChange ={(e)=> handleChange(e)}
                    />
                </div>
                <div>
                    <input
                    type='text'
                    placeholder="email"
                    name = "email"
                    onChange ={(e)=> handleChange(e)}
                    />
                </div>
                <div>
                    <input
                    type='password'
                    placeholder="password"
                    name = "password"
                    onChange ={(e)=> handleChange(e)}
                    />
                </div>
                <div>
                    <input
                    type='password'
                    placeholder="Confirm password"
                    name = "confirmPassword"
                    onChange ={(e)=> handleChange(e)}
                    />
                </div>
                <button type='submit'>Create User</button>
                <span> Already have an account ? <Link to="/login">Login</Link></span>

            </form>
            <ToastContainer />
        {/* </FormContainer> */}
    </>
  )
}
// const FormContainer = styled.div
export default Register



Solution

Check the Answers

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?