React TypeError: Object(...)(...) is undefined when using Context API

Question

Been working with react context api to try pass data among material-ui components.

So I'm trying to submit registration data using material ui stepper.

I will try replicate what I want to achieve with links to my current code and screenshots

1. I used material ui stepper and stated the props that I want passed in it as shown in the code link -> https://pastebin.com/uu5j6ADB

2. I created the two forms independently that collect data from the user during registration namely BusinessRegisterForm ( https://pastebin.com/sdFGBfmq ) and UserRegisterForm ( https://pastebin.com/GbcmByF2 ) shown in the links.

3. I created an index.js file in the folder where the two forms reside, imported the forms and passed them to the material UI stepper component as shown in the link ( https://pastebin.com/GM9EcVvy )

4. Finally i Created a context to be able to manage state of the data passed between the two forms namely AuthStepperContext as shown ( https://pastebin.com/TP7MSJ7Q ) I passed the provider to the main index.js file at root ( https://pastebin.com/f5GFKHC8 )

Above explains how my project is structured.

The Problem

At the last step of the form stepper I want to submit the data from the forms. I pass the handle Submit function from props to the last button in the stepper after a user has entered all the data. reference this code for stepper ( https://pastebin.com/uu5j6ADB )

The problem comes where I call the AuthStepperContext in the index.js file that passes the two forms to the material ui stepper. I want to get the handleSubmit from the context and pass it as props to the stepper and also to the Business register form as its the last form to be filled by the user before submitting all the data.

import React, { useContext, useState } from 'react';
import BusinessRegisterForm from './BusinessRegisterForm';
import UserRegisterForm from './UserRegisterForm';
import HorizontalStepper from '../../controls/HorizontalOptionalStepper';
import Container from '@material-ui/core/Container';
import AuthStepperContext from '../../../Context/AuthContext';
import axios from 'axios'
import { useAuth } from '../../../Context/AuthContext'

export default function RegisterStepper() {
    
    // the issue happens when i introduce this context
    // and try to pass it down to the stepper
    const {handleSubmit} = useContext(AuthStepperContext)

    const getSteps = () => {
        return ['Create Account', 'Add Business'];
    }
    
    const getStepContent = (step) => {
        switch (step) {
            case 0:
            return <UserRegisterForm />;
            case 1:
            return <BusinessRegisterForm />;
            default:
            return 'Unknown step';
        }
    }

    const isStepOptional = (step) => {
        return ;
    }

    const [activeStep, setActiveStep] = useState(0);

    return (
        <Container maxWidth='sm'>
            <HorizontalStepper
                getSteps = {getSteps}
                getStepContent = {getStepContent}
                isStepOptional = {isStepOptional}
                activeStep = {activeStep}
                setActiveStep = {setActiveStep}
                handleSubmit = {handleSubmit}
            />
        </Container>
    )
}

When I call the handleSubmit function from the Context and pass it down as props to the Stepper, as shown ( https://pastebin.com/63HXPJkk ), I get an error TypeError: Object(...)(...) is undefined

I first thought the error was due to using objects as initial state and had to replace every field with its own state.

Is there a way to capture data and submit data in the last form when a user wants to submit the form data?

Answer 1

So i figured out the problem for anyone who might come upon the same issue again. The problem was with the was with the way I was importing one of my named modules. It is supposed to be wrapped in curly braces.

A similar solution was offered in a similar post here useContext() returns undefined

Here is the line in my code after I refactored my code to apply the changes to the stepper:

import {AuthStepperContext} from '../../../Context/AuthStepperContext';