mdbreact error - Element type is invalid: expected a string (for built-in components)

Question

I am trying to implement the react-multistep registration using mdb react but I am getting the error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I tried in different ways to resolve this issue using Github and Stack Overflow but I can't find the problem in my code.

Here is my code:

import React,{Component} from 'react'
import {Container,Step,Row,Col,Stepper,Input,Button} from 'mdbreact'

class Main extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        formActivePanel2: 1,
        formActivePanel2Changed: false,
      }
    }
  
    swapFormActive = (a) => (param) => (e) => {
        this.setState({
          ['formActivePanel' + a]: param,
          ['formActivePanel' + a + 'Changed']: true
      });
    }
  
    handleNextPrevClick = (a) => (param) => (e) => {
        this.setState({
          ['formActivePanel' + a] : param,
          ['formActivePanel' + a + 'Changed']: true
      });
    }
  
    handleSubmission = () => {
        alert('Form submitted!');
    }
  
    calculateAutofocus = (a) => {
        if (this.state['formActivePanel'+a+'Changed']) {
          return true
      }
    }
  
    render() {
      return(
        <Container>
          <Row className="pt-5 justify-content-center">
            <Col md="2" className="pl-5 pl-md-0 pb-5">
              <Stepper icon vertical>
                <Step icon="folder-open-o" stepName="Basic Information" onClick={this.swapFormActive(2)(1)} vertical></Step>
              <Step icon="pencil" stepName="Personal Data" onClick={this.swapFormActive(2)(2)} vertical></Step>
              <Step icon="photo" stepName="Terms and Conditions" onClick={this.swapFormActive(2)(3)} vertical></Step>
              <Step icon="check" stepName="Finish" onClick={this.swapFormActive(2)(4)} vertical></Step>
            </Stepper>
          </Col>
  
          <Col md="7">
            { this.state.formActivePanel2 == 1  &&
            (<Col md="12">
              <h3 className="font-weight-bold pl-0 my-4">
                <strong>Basic Information</strong></h3>
              <Input label="Email" className="mt-4" autoFocus={this.calculateAutofocus(2)}/>
              <Input label="Username" className="mt-4"/>
              <Input label="Password" className="mt-4"/>
              <Input label="Repeat Password" className="mt-4"/>
              <Button color="mdb-color" rounded className="float-right" onClick={this.handleNextPrevClick(2)(2)}>next</Button>
            </Col>)}
  
            { this.state.formActivePanel2 == 2  &&
            (<Col md="12">
              <h3 className="font-weight-bold pl-0 my-4"><strong>Personal Data</strong></h3>
              <Input label="First Name" className="mt-3" autoFocus={this.calculateAutofocus(2)}/>
              <Input label="Second Name" className="mt-3"/>
              <Input label="Surname" className="mt-3"/>
              <Input  label="Address" type="textarea" rows="2"/>
              <Button color="mdb-color" rounded className="float-left" onClick={this.handleNextPrevClick(2)(1)}>previous</Button>
              <Button color="mdb-color" rounded className="float-right" onClick={this.handleNextPrevClick(2)(3)}>next</Button>
            </Col>)}
  
            { this.state.formActivePanel2 == 3  &&
            (<Col md="12">
              <h3 className="font-weight-bold pl-0 my-4"><strong>Terms and conditions</strong></h3>
              <Input label="I agreee to the terms and conditions" type="checkbox" id="checkbox3" autoFocus={this.calculateAutofocus(2)} />
              <Input label="I want to receive newsletter" type="checkbox" id="checkbox4" />
              <Button color="mdb-color" rounded className="float-left" onClick={this.handleNextPrevClick(2)(2)}>previous</Button>
              <Button color="mdb-color" rounded className="float-right" onClick={this.handleNextPrevClick(2)(4)}>next</Button>
            </Col>)}
  
            { this.state.formActivePanel2 == 4  &&
            (<Col md="12">
              <h3 className="font-weight-bold pl-0 my-4"><strong>Finish</strong></h3>
              <h2 className="text-center font-weight-bold my-4">Registration completed!</h2>
              <Button color="mdb-color" rounded className="float-left" onClick={this.handleNextPrevClick(2)(3)}>previous</Button>
              <Button color="success" rounded className="float-right" onClick={this.handleSubmission}>submit</Button>
            </Col>)}
          </Col>
        </Row>
      </Container>
      )
    }
  }

export default  Main

Answer 1

You are exporting the component Main as default and in the component where you are using this Main component, you are importing it as import {Main} from path/Main.js.So, just change it to import Main from path/Main.js.

Update:

swapFormActive = (a,param,e) => {
        this.setState({
          ['formActivePanel' + a]: param,
          ['formActivePanel' + a + 'Changed']: true
      });
    }

    handleNextPrevClick = (a,param,e) => {
        this.setState({
          ['formActivePanel' + a] : param,
          ['formActivePanel' + a + 'Changed']: true
      });
    }

...
   <Step icon="check" stepName="Finish" onClick={(e)=>this.swapFormActive(2,4,e)} vertical></Step>
 <Button color="mdb-color" rounded className="float-right" onClick={(e)=>this.handleNextPrevClick(2,2,e)}>next</Button>