Modal onSubmit just redirects to home page and then crashes

I messed around with some installs and configurations. And now for some reason my code isn’t working like it used to. I’m not sure where I messed up. I’ve included my package.json and my next.config.js. This is how my code was working before: when I clicked on the cell in the table, it popped up the question modal. Then when I clicked submit on the question modal, the question modal would disappear and the feedback modal would pop up. Now when I click submit on the question modal, it just randomly redirects me to the home page.

I’m on next.js 8.0.4-canary.21 and I do not plan to upgrade because it causes a lot of other problems for me when I do.

Question Modal:

import React, { Component } from 'react';

import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
import UserInput from './userInput.js';
import Feedback from "./feedback/feedback";

class SampleQ extends Component {
    static getInitialProps({query: {amount, question, answer}}) {
        return {specAmt: amount, specQ: question, specA: answer}
    }

    constructor(props) {
        super(props);

        this.state = {
            showQuestion: false, // tracks visibility of first modal (the question modal in this component)
            showFeedback: false // tracks visibility of second modal (the feedback modal in other component)
        };

        this.handleShow = () => {
            this.setState({ showQuestion: true });
        };

        this.handleHide = () => {
            this.setState({ showQuestion: false });
        };

        this.submitForm = () => {
            this.setState({
                showQuestion: false, // close question modal
                showFeedback: true, // should open Feedback modal
            });
        };

        this.closeFeedback = () => {
            this.setState( { showFeedback: false }); // close Feedback modal
        }
    }

    render() {
        return (
            <>
                <Button variant="outline-danger" size = "lg" onClick={this.handleShow}>
                    $ {this.props.amount}00
                </Button>

                <Modal
                    show={this.state.showQuestion}
                    onHide={this.handleHide}
                    dialogClassName="modal-90w"
                    aria-labelledby="example-custom-modal-styling-title"
                >
                    <Modal.Header closeButton>
                        <Modal.Title id="example-custom-modal-styling-title">
                            Question
                        </Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <p>
                            {this.props.question}
                        </p>
                        <div>
                            <UserInput
                                answer={this.props.specA}
                                handleClick={this.submitForm}
                            />
                            <Feedback
                                showModal={this.state.showFeedback}
                                onSubmit={this.closeFeedback}
                            />
                        </div>
                    </Modal.Body>
                </Modal>
            </>
        );
    }
}

export default SampleQ;

Form for the Question Modal:

import React, { Component } from "react";

import Form from "react-bootstrap/Form";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";

class UserInput extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Form onSubmit={this.props.handleClick}>
                <Form.Group as={Row} controlId="formAnswer">
                    <Form.Label column sm={2}>
                        Answer
                    </Form.Label>
                    <Col sm={10}>
                        <Form.Control type="text" placeholder="Enter Here"/>
                    </Col>
                </Form.Group>
                <div>
                    <Button
                        variant="primary"
                        onClick={this.props.handleClick}
                    >Submit</Button>
                </div>
            </Form>
        );
    }
}

export default UserInput;

Feedback Modal:

import React, { Component } from 'react';
import styles from "../../scss/modalStyle.scss";
import Modal from "react-bootstrap/Modal";
import { AiFillCheckCircle } from 'react-icons/ai';
import { IconContext } from "react-icons";
import Button from "react-bootstrap/Button";

class Feedback extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Modal
                show={this.props.showModal}
                onHide={this.props.onSubmit}
                className="Feedback"
            >
            <Modal.Dialog style={[styles.modalDialog, styles.modalConfirm]}>
                <Modal.Body style={styles.modalContent}>
                    <Modal.Body style={styles.modalHeader}>
                        <Modal.Body style={styles.iconBox}>
                            <IconContext.Provider value={{ size: "70px", className: "global-class-name" }}>
                                <div>
                                    <AiFillCheckCircle />
                                </div>
                            </IconContext.Provider>
                        </Modal.Body>
                        <h4 className='mx-auto'>Congratulations!</h4>
                    </Modal.Body>
                    <Modal.Body style={styles.modalBody}>
                        <p className="text-center">That was the correct answer.</p>
                    </Modal.Body>
                    <Modal.Body style={styles.modalFooter}>
                        <Button
                            className="btn btn-success btn-block"
                            data-dismiss="modal"
                            onClick={this.props.onSubmit}
                        >
                            OK
                        </Button>
                    </Modal.Body>
                </Modal.Body>
            </Modal.Dialog>
            </Modal>
        );
    }
}

export default Feedback;

my package.json

{
  "name": "hello-next",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon server/index.js",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@zeit/next-sass": "^1.0.1",
    "bootstrap": "^4.3.1",
    "express": "^4.16.4",
    "i": "^0.3.6",
    "jquery": "^3.4.1",
    "mysql": "^2.16.0",
    "next": "^8.0.4-canary.21",
    "node-sass": "^4.13.1",
    "npm": "^6.13.7",
    "react": "^16.8.5",
    "react-bootstrap": "^1.0.0-beta.9",
    "react-dom": "^16.8.5",
    "react-icons": "^3.9.0"
  },
  "devDependencies": {
    "css-loader": "^1.0.1",
    "html-webpack-plugin": "^3.2.0",
    "sass-loader": "^8.0.2",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-dev-server": "^3.10.3"
  }
}

next.config.js

// next.config.js
const withSass = require('@zeit/next-sass');
module.exports = withSass({
    cssModules: true,
    cssLoaderOptions: {
        importLoaders: 1,
        localIdentName: "[local]___[hash:base64:5]",
    }
});

[leerob]

Could you try uploading a reproducible example to Code Sandbox? 🙏

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.