<MDBModal isOpen={this.state.addModal}>
    <form className="needs-validation" onSubmit={this.handleStudentAdd} noValidate>
      <MDBModalHeader className="text-center text-default" titleClass="w-100 font-weight-bold" toggle={this.toggleAdd}>
       Add New Student
     </MDBModalHeader>
     <MDBModalBody>
         <MDBInput type="text" label="Firstname" name="firstname" required containerClass={"mb-5 mx-3"}>
             <div className="valid-feedback">Looks good!</div>
             <div className="invalid-feedback">Please provide a valid firstname.</div>
         </MDBInput>
         <MDBInput type="text" label="Lastname" name="lastname" required containerClass={"mb-5 mx-3"}>
             <div className="valid-feedback">Looks good!</div>
             <div className="invalid-feedback">Please provide a valid lastname.</div>
         </MDBInput>
         <MDBInput type="text" label="Grade" name="grade" required containerClass={"mb-5 mx-3"}>
             <div className="valid-feedback">Looks good!</div>
             <div className="invalid-feedback">Please provide a valid grade.</div>
        </MDBInput>
        <MDBInput type="text" label="Username" name="username" required containerClass={"mb-5 mx-3"}>
            <div className="valid-feedback">Looks good!</div>
            <div className="invalid-feedback">Please provide a valid username.</div>
         </MDBInput>
         <MDBInput type="password" label="Password" name="password" required containerClass={"mb-5 mx-3"} autoComplete="new-password">
                <div className="valid-feedback">Looks good!</div>
                <div className="invalid-feedback">Please provide a valid password.</div>
         </MDBInput>
         <MDBInput type="text" label="Active" name="active" required containerClass={"mb-5 mx-3"}>
               <div className="valid-feedback">Looks good!</div>
               <div className="invalid-feedback">Please provide a valid active state.</div>
        </MDBInput>
     </MDBModalBody>
     <MDBModalFooter className="justify-content-center">
          <MDBBtn type="submit" >Add Student
               <MDBIcon icon="paper-plane" className="ml-1" />
         </MDBBtn>
     </MDBModalFooter>
  </form>
</MDBModal>

Here is my modal which consists a form.

There was two problems with it:

1) I couldn't scroll modal down as long as it had toggle={this.toggleAdd} in MDBModal>, it was being closed automatically even by clicking on modal's scroll part, so I decided to remove it from there.

2) whenever the modal scrolls it prints _this.props.toggle is not a function in console repeatedly

Am I missing something? how can i fix them?

Edit:

I found the second error was caused by deleting toggle property from MDBMODAL Component but I couldn't fix the first problem(can't scroll)

here is the complete code:

    constructor(props){
        super(props);

        this.state = {
            addModal: false, // Add
        };
    }

    toggleAdd = () => {
        this.setState({
            addModal: !this.state.addModal
        });
    }

    handleStudentAdd = (e) => {
        e.preventDefault()
        e.target.className += " was-validated";
        if(e.target.checkValidity() === true) {
            this.setState((state) => ({
                addModal: !this.state.addModal
            }));
        }
    }

    render(){
        return (
            <div>
                <button onClick={this.toggleAdd} >Click Me!</button>
                <MDBModal isOpen={this.state.addModal}>
                    <form className="needs-validation" onSubmit={this.handleStudentAdd} noValidate>
                        <MDBModalHeader className="text-center text-default" titleClass="w-100 font-weight-bold" toggle={this.toggleAdd}>
                            Add New Student
                        </MDBModalHeader>
                        <MDBModalBody>
                            <MDBInput type="text" label="Firstname" name="firstname" required containerClass={"mb-5 mx-3"}>
                                <div className="valid-feedback">Looks good!</div>
                                <div className="invalid-feedback">Please provide a valid firstname.</div>
                            </MDBInput>
                            <MDBInput type="text" label="Lastname" name="lastname" required containerClass={"mb-5 mx-3"}>
                                <div className="valid-feedback">Looks good!</div>
                                <div className="invalid-feedback">Please provide a valid lastname.</div>
                            </MDBInput>
                            <MDBInput type="text" label="Grade" name="grade" required containerClass={"mb-5 mx-3"}>
                                <div className="valid-feedback">Looks good!</div>
                                <div className="invalid-feedback">Please provide a valid grade.</div>
                            </MDBInput>
                            <MDBInput type="text" label="Username" name="username" required containerClass={"mb-5 mx-3"}>
                                <div className="valid-feedback">Looks good!</div>
                                <div className="invalid-feedback">Please provide a valid username.</div>
                            </MDBInput>
                            <MDBInput type="password" label="Password" name="password" required containerClass={"mb-5 mx-3"} autoComplete="new-password">
                                <div className="valid-feedback">Looks good!</div>
                                <div className="invalid-feedback">Please provide a valid password.</div>
                            </MDBInput>
                            <MDBInput type="text" label="Active" name="active" required containerClass={"mb-5 mx-3"}>
                                <div className="valid-feedback">Looks good!</div>
                                <div className="invalid-feedback">Please provide a valid active state.</div>
                            </MDBInput>
                        </MDBModalBody>
                        <MDBModalFooter className="justify-content-center">
                            <MDBBtn type="submit" >Add Student
                                <MDBIcon icon="paper-plane" className="ml-1" />
                            </MDBBtn>
                        </MDBModalFooter>
                    </form>
                </MDBModal>
            </div>
        )
    }