I am trying to find a solution for states in ReactJS. I am using ReactJS v18.2 and react-router-dom library for navigation. I have the following code block for login page.
async function handleLogin() {
Auth.signIn(userInformation.name!, userInformation.password)
.then((user) => {
if (user.challengeName === 'NEW_PASSWORD_REQUIRED') {
navigate('/auth/forgetPassword', { state: { user: user } })
} else {
navigate('/main', { state: { user: user } })
}
})
.catch((_) => {
setErrorMessage(t('Wrong credentials!'))
})
}
I am trying to fetch data of the user with navigation and redirect to forgot password screen with the state data as in below.
import { useState } from 'react'
import { Button, TextField, Typography, Box, FormGroup } from '@mui/material'
import { useLocation } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import { User } from '../configs/types/Users'
import { uniqueId } from '../utils'
import { Auth } from 'aws-amplify'
export default function ForgetPassword() {
const { t } = useTranslation()
const location = useLocation()
const [errorMessage, setErrorMessage] = useState<string>('')
const [userInformation, setUserInformation] = useState<Partial<User>>({
password: '',
passwordRepeat: '',
givenName: '',
familyName: '',
})
console.log(location)
//rest of the codeblock
When I print the result in forgot password state, following location results are as follow:
{
pathname: '/auth/forgetPassword',
search: '',
hash: '',
state: null,
key: 'default'
}
As seen above, state is always returning null value. Any help would be appreciated. Thanks!
