React: Multi step form/wizard TypeError: action is not a function

Question

it is my first time using React/doing frontend development in general, and I have gotten stuck on trying to create a multi step form/wizard for my web app. I took reference from this react hook form tutorial on making a multi step form with validation, however, a typeerror has been constantly thrown whenever I tried to submit each step of the form and push to the next step. I must be missing something extremely basic.

My structure is as follows.

I created my global store in the App.js component, and wrapped the contents of my App.js with a statemachineprovider as follows

App.js

function Main() {
        return (
            <StateMachineProvider>
            <DevTool/>
            <MemoryRouter>
            <MainNavbar></MainNavbar>
            <div style={{
                height: "100vh",
                backgroundSize: 'contain',
                backgroundPosition: 'top center',
                backgroundRepeat: 'no-repeat',
                backgroundImage: `url("https://www.smartnation.gov.sg/images/default-source/module/home-base-item/cb0c06c1-cfc1-48a9-84ae-7909e93cf716.jpg" )`
            }}>
                <div className="content">
                    <Route exact path="/" component={Home}/>
                    <Route path="/stuff" component={Stuff}/>
                    <Route path="/contact" component={Contact}/>
                    <Route path="/step1" component={Step1}/>
                    <Route path="/step2" component={Step2}/>
                    <Route path="/result" component={Result}/>

                </div>
            </div>
            </MemoryRouter>
            </StateMachineProvider>
                );

}

My Contact.js looks like this

import React, {Component} from "react";
import ReactDOM from "react-dom";
import {
MemoryRouter,
    Route,
    Link,
    useLocation
} from "react-router-dom";
import Step1 from "./Step1";
import Step2 from "./Step2";
import Result from "./Result";



const Contact = () => {
        const location = useLocation();
        return (
            <>
            <div>
                <nav className="container" aria-label="form-navigation">
                    <ul className="pagination">
                        <li className={location.pathname === "/contact" ? "page-item disabled" : "page-item"}>
                            <a className="page-link"> <Link to="/step1">Previous</Link></a>
                        </li>
                        <li className={location.pathname === "/step1" ? "page-item active" : "page-item"}>
                            <a className="page-link"> <Link to="/step1">1</Link></a>
                        </li>
                        <li className={location.pathname === "/step2" ? "page-item active" : "page-item"}>
                            <a className="page-link"> <Link to="/step2">2</Link></a>
                        </li>
                        <li className={location.pathname === "/result" ? "page-item active" : "page-item"}>
                            <a className="page-link"> <Link to="/result">3</Link></a>
                        </li>
                        <li className="page-item">
                            <a className="page-link" >Next</a>
                        </li>
                    </ul>
                </nav>
            </div>
            </>
        );
}


export default Contact;import React, {Component} from "react";
import ReactDOM from "react-dom";
import {
MemoryRouter,
    Route,
    Link,
    useLocation
} from "react-router-dom";
import Step1 from "./Step1";
import Step2 from "./Step2";
import Result from "./Result";



const Contact = () => {
        const location = useLocation();
        return (
            <>
            <div>
                <nav className="container" aria-label="form-navigation">
                    <ul className="pagination">
                        <li className={location.pathname === "/contact" ? "page-item disabled" : "page-item"}>
                            <a className="page-link"> <Link to="/step1">Previous</Link></a>
                        </li>
                        <li className={location.pathname === "/step1" ? "page-item active" : "page-item"}>
                            <a className="page-link"> <Link to="/step1">1</Link></a>
                        </li>
                        <li className={location.pathname === "/step2" ? "page-item active" : "page-item"}>
                            <a className="page-link"> <Link to="/step2">2</Link></a>
                        </li>
                        <li className={location.pathname === "/result" ? "page-item active" : "page-item"}>
                            <a className="page-link"> <Link to="/result">3</Link></a>
                        </li>
                        <li className="page-item">
                            <a className="page-link" >Next</a>
                        </li>
                    </ul>
                </nav>
            </div>
            </>
        );
}


export default Contact;

and the rest of the code (Step1, Step2, updateAction etc)is exactly the same as the code used in the tutorial mentioned. It is also found here in codesandbox.

I will appreciate it if someone can just explain my error in thinking as I am really new to state management in general!

Answer 1

This is due to the LSM major version update. https://github.com/bluebill1049/little-state-machine/releases/tag/v4.0.0-rc.2

all you have to change is in the useStateMachine usage.

- const { state, action } = useStateMachine(updateAction);
+ const { state, actions } = useStateMachine({ updateAction });