Cannot read property 'submit' of undefined - React

Question

I create wizard form with react-final-form. When I click on a button I get this error:

I do not understand why such a message appears. This is my Wizard component.

import { Form as FinalForm } from 'react-final-form'; 
import { Button, Form, } from 'reactstrap';
    class Wizard extends Component {
      static Page = ({ children }) => children
    
      constructor(props) {
        super(props);
        this.state = {
          page: 0,
          values: props.initialValues || {},
        };
      }
    
      next = (values) => {
        const { children } = this.props;
        this.setState((state) => ({
          page: Math.min(state.page + 1, React.Children.toArray(children).length - 1),
          values,
        }));
        console.log('ha');
      }
    
      previous = () => {
        this.setState((state) => ({
          page: Math.max(state.page - 1, 0),
        }));
      }
    
      validate = (values) => {
        const { children } = this.props;
        const { page } = this.state;
        const activePage = React.Children.toArray(children)[
          page
        ];
        return activePage.props.validate ? activePage.props.validate(values) : {};
      }
    
      handleSubmit = (values) => {
        const { children, onSubmit } = this.props;
        const { page } = this.state;
        const isLastPage = page === React.Children.count(children) - 1;
        if (isLastPage) {
          onSubmit(values);
        } else {
          this.next(values);
        }
        console.log(children);
        console.log(React.Children.toArray(children));
        console.log('hao');
      }
    
      render() {
        const { children } = this.props;
        const { page, values } = this.state;
        const activePage = React.Children.toArray(children)[page];
        const isLastPage = page === React.Children.count(children) - 1;
        return (
          <FinalForm
            initialValues={values}
            validate={this.validate}
            onSubmit={this.handleSubmit}
          >
            {
              ({
                handleSubmit,
                submitting,
                pristine,
                invalid,
              }) => (
                <Form onSubmit={handleSubmit}>
                  {activePage}
                  <div className="buttons">
                    {page > 0 && (
                      <Button type="button" onClick={this.previous}>
                        « Previous
                      </Button>
                    )}
                    {!isLastPage && <Button color="success" type="submit">Next »</Button>}
                    {isLastPage && (
                      <Button color="success" type="submit" disabled={submitting || pristine || invalid}>
                        Submit
                      </Button>
                    )}
                  </div>
                </Form>
              )
            }
          </FinalForm>
        );
      }
    }

When I click on the button, the function handleSubmit is probably not triggered because console.log is not displayed. Can anyone know why such a message appears? Thanks for the help in advance.

Answer 1

Your Buttons do not have an onClick event:

        {!isLastPage && <Button color="success" type="submit">Next »</Button>}
                {isLastPage && (
                  <Button color="success" type="submit" disabled={submitting || pristine || invalid}>
                    Submit
                  </Button>
                )}

so they should be like this:

        {!isLastPage && <Button color="success" type="submit" onClick={handleSubmit}>Next »</Button>}
                {isLastPage && (
                  <Button color="success" type="submit" disabled={submitting || pristine || invalid} onClick={handleSubmit}>
                    Submit
                  </Button>
                )}