User.get() is returning null

Moralis General
#1

I wanted a card to return ‘Guest’ if not logged in and {username} if account was signed in but now I can’t even render my app anymore because I keep getting the following error: [TypeError: Cannot read properties of null (reading ‘get’)]. I’ve been trying to solve this for a couple days now, here is my code: is there something wrong with my useEffect function?

import React, {useEffect} from 'react'
import './Home.css'
import {Card, Figure} from 'react-bootstrap'
import Data from './Data'
import {useMoralis} from 'react-moralis'


function Today()   {
    const {user, refetchUserData}  = useMoralis();

    const initialState = (
                            <div className='status'>
                                <p>Guest</p>
                            </div>)
                    
    const loggedState =  (
          <div className='status'>
                <p>{user.get('username')}</p>
            </div>)
        
    const value = useEffect(() => {
        refetchUserData()
         if (user != null) {
            return(loggedState)
        } else {
    return(initialState)
    }})
    
  

    const current = new Date();

    const date = `${current.getDate()}/${current.getMonth()+1}/${current.getFullYear()}`;
        return(
            <div>
                <div className='top'>

                    <Card style={{ width: '100%' }} >
                        <Card.Body>
                                <Card.Title><span className='card-titled'>Home</span></Card.Title>
                                <Card.Subtitle className="mb-2 text-muted">Dashboard</Card.Subtitle>
                                <Card.Text>
                                    Date: {date}
                                </Card.Text>
                        </Card.Body>
                        <Card.Body className='bannerlogo'>
                                <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Ethereum_logo_2014.svg/73px-Ethereum_logo_2014.svg.png' alt="Girl in a jacket" width="60" height="90" />
                        </Card.Body>
                        <Card.Body className='profilepic'>
                        <Figure>
                            <Figure.Image
                                width={60}
                                height={70}
                                alt="171x180"
                                src="https://3.bp.blogspot.com/-UI5bnoLTRAE/VuU18_s6bRI/AAAAAAAADGA/uafLtb4ICCEK8iO3NOh1C_Clh86GajUkw/s320/guest.png"
                            />
                             <Figure.Caption>
                                {value}
                             </Figure.Caption>
                            </Figure>
                        </Card.Body>
                    </Card>
                </div>

            <Data/>
            </div>
        )

}
export default Today
#2

I think that you’ll have to call authenticate before accessing user:

import React from "react";
import { useMoralis } from "react-moralis";

function App() {
  const { authenticate, isAuthenticated, user } = useMoralis();

  if (!isAuthenticated) {
    return (
      <div>
        <button onClick={() => authenticate()}>Authenticate</button>
      </div>
    );
  }

  return (
    <div>
      <h1>Welcome {user.get("username")}</h1>
    </div>
  );
}
#3

I just tried that, same error… also the login is just username & password

#4

This isn’t a solution, but maybe it removes the error for now:

const loggedState =  (
      <div className='status'>
            <p>{user ? user.get('username') : "no user" }</p>
        </div>)
#5

I was able to get rid of the error but now its showing neither initialState or loggedState, the area the text is supposed to be rendered is left blank, here is the new code:

import React, {useLayoutEffect} from 'react'
import './Home.css'
import {Card, Figure} from 'react-bootstrap'
import Data from './Data'
import {useMoralis} from 'react-moralis'


function Today()   {
    const {user }  = useMoralis();

   
                    
   
    const value = useLayoutEffect(() => {
         if (!user) {
            return(initialState)
        } else {
    return(loggedState)
    }})

    const initialState = () => {

       <div className='status'>
            <p>Guest</p>
        </div>
    }
    const loggedState = () => {
       
       <div className='status'>
              <p>@{user.get('username')}</p>
          </div>
    }
  

    const current = new Date();

    const date = `${current.getDate()}/${current.getMonth()+1}/${current.getFullYear()}`;
        return(
            <div>
                <div className='top'>

                    <Card style={{ width: '100%' }} >
                        <Card.Body>
                                <Card.Title><span className='card-titled'>Home</span></Card.Title>
                                <Card.Subtitle className="mb-2 text-muted">Dashboard</Card.Subtitle>
                                <Card.Text>
                                    Date: {date}
                                </Card.Text>
                        </Card.Body>
                        <Card.Body className='bannerlogo'>
                                <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Ethereum_logo_2014.svg/73px-Ethereum_logo_2014.svg.png' alt="Girl in a jacket" width="60" height="90" />
                        </Card.Body>
                        <Card.Body className='profilepic'>
                        <Figure>
                            <Figure.Image
                                width={60}
                                height={70}
                                alt="171x180"
                                src="https://3.bp.blogspot.com/-UI5bnoLTRAE/VuU18_s6bRI/AAAAAAAADGA/uafLtb4ICCEK8iO3NOh1C_Clh86GajUkw/s320/guest.png"
                            />
                             <Figure.Caption>
                                {value}
                             </Figure.Caption>
                            </Figure>
                        </Card.Body>
                    </Card>
                </div>

            <Data/>
            </div>
        )

}
export default Today
#6

I have responded to your question in the other thread. Will close this thread for now.

#7