When card is clicked, progress bar have to advance with useEffect. How can i do this?

I would like the progress bar to advance when I hit one of the three cards using useEffect so that it has animation. How can I do? Written like this gives me error on Hook rules. If there is another way without using useEffect it would be fine, the important thing is that there is animation and when I press the cards you advance the progress bar (and another div appears, but that is already implemented).

I am using the Bootstrap progress bar and React.

Thanks in advance!

import React, {useEffect, useState} from 'react'
import $ from 'jquery';
import {ProgressBar, Button} from 'react-bootstrap';
import {Register, RegisterChoice, RegisterChoiceEmail, RegisterChoiceH1, RegisterChoiceWrapper, RegisterChoiceWrapperEmail, RegisterChoiceCard, RegisterChoiceIcon, RegisterChoiceH2, ProgressBarComponent, RegisterEmail} from './SceltaRegistrazioneElements'
import FacebookLogin from 'react-facebook-login';
import {FaFacebookF} from 'react-icons/fa';
import GoogleLogin from 'react-google-login';
import GoogleButton from 'react-google-button';

const responseFacebook = (response) => {
    console.log(response);
    console.log(response.profileObj);
}

const responseGoogle = (response) => {
    console.log(response);
    console.log(response.profileObj);
}

const Registrazione = () => {
    const [percentage, setPercentage] = useState(20);

    function RegisterChoiceClicked() {
        return (
            $('#registerChoice').hide(), 
            $('#registerChoiceEmail').css("display", "flex"),
            useEffect(() => {
                setPercentage((oldPercentage) => {
                    return oldPercentage + 20;
                });
            }, 500)
        );
    }

    return (
        <Register>
            <RegisterChoice id="registerChoice">
                <RegisterChoiceH1>Sei una struttura, vuoi diventare un pet sitter o un cliente?</RegisterChoiceH1>
                <RegisterChoiceWrapper>
                    <RegisterChoiceCard onClick={RegisterChoiceClicked}>
                        <RegisterChoiceIcon src={require('../../../images/structure.jpg').default}/>
                        <RegisterChoiceH2>Struttura</RegisterChoiceH2>
                    </RegisterChoiceCard>
                    <RegisterChoiceCard onClick={RegisterChoiceClicked}>
                        <RegisterChoiceIcon src={require('../../../images/petSitter.jpg').default}/>
                        <RegisterChoiceH2>Pet sitter</RegisterChoiceH2>
                    </RegisterChoiceCard>
                    <RegisterChoiceCard onClick={RegisterChoiceClicked}>
                        <RegisterChoiceIcon src={require('../../../images/client.jpg').default}/>
                        <RegisterChoiceH2>Cliente</RegisterChoiceH2>
                    </RegisterChoiceCard>
                </RegisterChoiceWrapper>
            </RegisterChoice>
            <RegisterChoiceEmail id="registerChoiceEmail">
                <RegisterChoiceH1>Come vuoi registrarti?</RegisterChoiceH1>
                <RegisterChoiceWrapperEmail>
                    <Button variant="primary w-100" onClick={RegisterChoiceClicked}>Accedi con l'email</Button>
                    <FacebookLogin
                        appId=""
                        autoLoad={false}
                        fields="name,email,picture"
                        callback={responseFacebook}
                        textButton="Registrati con Facebook"
                        icon={<FaFacebookF  style={{marginRight: "10px", marginBottom: "3px"}}></FaFacebookF>}
                        cssClass="btnFacebook"
                        language="it_IT"
                    />
                    <GoogleLogin
                        clientId=""
                        buttonText="Accedi con Google"
                        onSuccess={responseGoogle}
                        onFailure={responseGoogle}
                        cookiePolicy={'single_host_origin'}
                        isSignedIn={true}
                        language="it_IT"
                        render={renderProps => (
                            <GoogleButton 
                                onClick={renderProps.onClick}
                                label='Registrati con Google'
                                style={{fontWeight: "700", fontFamily: "Helvetica, sans-serif", WebkitFontSmoothing: "antialiased", justifyContent: "center", minWidth: "240px"}}
                            />
                        )}
                    />
                </RegisterChoiceWrapperEmail>
            </RegisterChoiceEmail>
            <ProgressBar striped animated variant="success" now={percentage} style={{width: "70%", margin: "90px auto"}} />
        </Register>
    )
}

export default Registrazione

Answer

You can do it without useEffect and jquery. You have RegisterChoiceClicked for advance the progress bar on click. Then you can create boolean variable like const [click, setClick] = useState(false) for manipulating with DOM through conditions. See example

Advertisement

Answer