Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

React - setCurrentUser - currentUser?.[data] not working


Hi!

I´m new with React, but I was able to create my own php API to connect to MySql and fetch data from the database and also made the login page work.

The thing is, I don´t know why when trying to display, for example, the currentUser?.first_name it returns undefined.


export function Login() {
const [loading, setLoading] = useState(false)
const {saveAuth, setCurrentUser} = useAuth()

const formik = useFormik({
initialValues,
validationSchema: loginSchema,
onSubmit: async (values, {setStatus, setSubmitting}) => {
setLoading(true)
try {
const {data: auth} = await login(values.email, values.password)
console.log(auth);
if(auth.error == "0"){
saveAuth(auth)
const {data: user} = await getUserByToken(auth.api_token)
console.log(user)
setCurrentUser(user)
} else {
console.error(auth.message)
saveAuth(undefined)
setStatus("The login details are incorrect")
setSubmitting(false)
setLoading(false)
}

} catch (error) {
console.error(error)
saveAuth(undefined)
setStatus("The login details are incorrect")
setSubmitting(false)
setLoading(false)
}
},
})


the console.log(user) returns with:


api_token: "6"
fisrt_name: "Marcos"
fullname: "Marcos Booz"
id: "6"
last_name: "Booz"
password: "XXXX"
pic: 1
username: "XXXX"


After login, the router directs to the dashboard, but in the user menu, the User name is blank, even if I do a console.log(currentUser) it returns data as per the object above but currentUser?.first_name returns empty.

What possibly am I doing wrong?

Thanks!!


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Guys, I found the solution!

The JSON I was getting from the API didn´t have the same format as the UserModel interface, so that´s why it was not setting user. Now it´s working just fine.

happy



Hi Marcos,

Sorry for the delay in reply.

Glad to hear you already found a solution.

Yes, you should follow the default user object format. Or you can update object interface in src/app/modules/auth/core/_models.ts.

Please don't hesitate to reach out if you need anything more from us.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



I believe the problem is that the user was not set and the currentUser is undefined, since when trying to get the first_name, it returns blank.

How can I check if the function setCurrentUser()is working in my login?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(