Can anyone please help for functional component ?

[sandipthemes]

I have used below code https://stackblitz.com/edit/bs-stepper-react

But this is a class component, can anyone help how can we create the same using functional component.

[albert-92]

I would like to know too.

[innv-imtinan]

me too

[yusufugurozbek]

Hello guys 👋🏼

Probably, below example could work for you:

import React, {useEffect, useState} from 'react';
import Stepper from "bs-stepper";

import 'bs-stepper/dist/css/bs-stepper.min.css';

function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
}

function App() {
    const [stepper, setStepper] = useState<Stepper>();

    useEffect(() => {
        const stepperDiv = document.querySelector('#stepper')
        setStepper(new Stepper(stepperDiv!, {
            linear: false,
            animation: true
        }))
    }, []);

    return (
        <div>
            <div id="stepper" className="bs-stepper">
                <div className="bs-stepper-header">
                    <div className="step" data-target="#test-l-1">
                        <button className="step-trigger">
                            <span className="bs-stepper-circle">1</span>
                            <span className="bs-stepper-label">Email</span>
                        </button>
                    </div>
                    <div className="line"></div>
                    <div className="step" data-target="#test-l-2">
                        <button className="step-trigger">
                            <span className="bs-stepper-circle">2</span>
                            <span className="bs-stepper-label">Password</span>
                        </button>
                    </div>
                    <div className="line"></div>
                    <div className="step" data-target="#test-l-3">
                        <button className="step-trigger">
                            <span className="bs-stepper-circle">3</span>
                            <span className="bs-stepper-label">Validate</span>
                        </button>
                    </div>
                </div>
                <div className="bs-stepper-content">
                    <form onSubmit={(e) => onSubmit(e)}>
                        <div id="test-l-1" className="content">
                            <div className="form-group">
                                <label htmlFor="exampleInputEmail1">Email address</label>
                                <input type="email" className="form-control" id="exampleInputEmail1"
                                       placeholder="Enter email"/>
                            </div>
                            <button className="btn btn-primary" onClick={() => stepper?.next()}>Next</button>
                        </div>
                        <div id="test-l-2" className="content">
                            <div className="form-group">
                                <label htmlFor="exampleInputPassword1">Password</label>
                                <input type="password" className="form-control" id="exampleInputPassword1"
                                       placeholder="Password"/>
                            </div>
                            <button className="btn btn-primary" onClick={() => stepper?.next()}>Next</button>
                        </div>
                        <div id="test-l-3" className="content text-center">
                            <button type="submit" className="btn btn-primary mt-5">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    );
}

export default App;