Open Modal/Alert Programmatically

Hi @Kem Muhammad,

This is exactly what I thought. You have to pass the function to the component from parent like this (modalChange property):

App.js file:

import React, { Component } from 'react';
import {
  MDBContainer,
  MDBBtn,
  MDBModal,
  MDBModalBody,
  MDBModalHeader,
  MDBModalFooter
} from 'mdbreact';
import FormPage from './child';

class ModalPage extends Component {
  state = {
    modal: false
  };

  toggle = () => {
    this.setState({
      modal: !this.state.modal
    });
  };

  render() {
    return (
      <MDBContainer>
        <FormPage modalChange={this.toggle} />
        <MDBModal isOpen={this.state.modal} toggle={this.toggle}>
          <MDBModalHeader toggle={this.toggle}>MDBModal title</MDBModalHeader>
          <MDBModalBody>(...)</MDBModalBody>
          <MDBModalFooter>
            <MDBBtn color='secondary' onClick={this.toggle}>
              Close
            </MDBBtn>
            <MDBBtn color='primary'>Save changes</MDBBtn>
          </MDBModalFooter>
        </MDBModal>
      </MDBContainer>
    );
  }
}

export default ModalPage;

child.js file:

    import React, { Component } from 'react';
    import { MDBContainer, MDBRow, MDBCol, MDBInput, MDBBtn } from 'mdbreact';

    class FormPage extends Component {
    submit = e => {
        // e.preventDefault();

        {/* YOUR CODE HERE */}
        this.props.modalChange();
    };
    render() {
        return (
        <MDBContainer>
            <MDBRow>
            <MDBCol md='6'>
                <form onSubmit={this.submit}>
                <p className='h5 text-center mb-4'>Sign in</p>
                <div className='grey-text'>
                    <MDBInput
                    label='Type your email'
                    icon='envelope'
                    group
                    type='email'
                    validate
                    error='wrong'
                    success='right'
                    />
                    <MDBInput
                    label='Type your password'
                    icon='lock'
                    group
                    type='password'
                    validate
                    />
                </div>
                <div className='text-center'>
                    <MDBBtn type='submit'>Login</MDBBtn>
                </div>
                </form>
            </MDBCol>
            </MDBRow>
        </MDBContainer>
        );
    }
    }

    export default FormPage;

Best regards, Konrad.