Error: Invalid Hook call and Unable to read properties of null (reading 'UseState')

[dee-goyal]

I'm begineer with react and was building a clone project. it was all going fine but just after i used react-oauth/google it shows some errors and I'm unable to fix them. I have provided with the important stuff so please look over and help me out.

Here is the version of react i'm working on.

"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"

please help me out!!

### App.js

import { GoogleOAuthProvider } from '@react-oauth/google';import Messenger from './components/Messenger';function App() {

const clientId = '119025373029-s16up4lflr8hf84ee6ubmeptir5iscgm.apps.googleusercontent.com'

return (<GoogleOAuthProvider clientId={clientId}><Messenger /></GoogleOAuthProvider>);}

export default App;

### LoginDialog.jsx

import { Dialog, Box, Typography, List, ListItem, styled } from '@mui/material';import { qrCodeImage } from '../../constants/data';import { GoogleLogin } from '@react-oauth/google';

const Component = styled(Box)    display: flex;

const Container = styled(Box)    padding: 56px 0 56px 56px;

const QRCode = styled('img')({height: 264,width: 264,margin: '50px 0 0 50px'})

const Title = styled(Typography)    font-size: 26px;     color: #525252;     font-weight: 300;     font-family: inherit;     margin-bottom: 25px;const StyledList = styled(List)    & > li {     padding: 0;     margin-top: 15px;     font-size: 18px;     line-height: 28px;     color: #4a4a4a;     }

const dialogStyle = {height: '96%',marginTop: '12%',width: '60%',maxWidth: '100%',boxShadow: 'none',overflow: 'hidden',}

const LoginDialog = () => {

const onLoginSuccess = () => {

}

const onLoginError = () => {

}

return (
    <Dialog 
        open={true}
        PaperProps={{sx: dialogStyle }}
    >
        <Component>
            <Container>
                <Title>Use WhatsApp on your computer:</Title>
                <StyledList>
                    <ListItem>1. Open WhatsApp on your phone</ListItem>
                    <ListItem>2. Tap Menu Setting and Select Whatsapp</ListItem>
                    <ListItem>3. Point your phone to this screen to capture the code</ListItem>
                </StyledList>
            </Container>
            <Box style={{position: 'relative'}}>
                <QRCode src={qrCodeImage} alt="qr code" />    
                <Box style={{ position: 'absolute', top: '50%', transform: 'translateX(25%)'}}>
                    <GoogleLogin 
                        onSuccess={onLoginSuccess}
                        onError={onLoginError}
                    />
                </Box>
            </Box>
        </Component>
    </Dialog>
)

}export default LoginDialog;

[arnavgoyal0808]

Hi kunal ,
i have noticed some syntax errors in your styled sections please check this , and the upper error is because of not proper calling use state functions . make sure hooks are called inside the function. and don't use hooks in conditionals like if , else.