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