Topic: Open Modal/Alert Programmatically

Kem Muhammad free asked 5 years ago


Hello

This is a NOOB question.

Using the basic code from the the examples how can you open either modal/alert with a call from another class/stateless function.

thank you for any help in advance


Konrad Stępień staff answered 5 years ago


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.


Kem Muhammad free answered 5 years ago


Thank You Konrad!

It worked just as you coded.


Konrad Stępień staff commented 5 years ago

Thank you very much for your feedback! If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.

Best Regards, Konrad.


Konrad Stępień staff answered 5 years ago


Hi @Kem Muhammad,

It depends exactly where you want to transfer it.

For example, if you have some code like this.

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

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

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

render() {
  return (
    <MDBContainer>
      <MDBBtn onClick={this.toggle}>Modal</MDBBtn>
      <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;

you can pass toggle function for your own component.

Like this: <Mycomponent myprops={this.toggle}/>

And Mycomponent can look like this

<div onClick={this.props.myprops}>...</div>

If you send me your code I will try to help you make it :)

Best regards, Konrad.


Kem Muhammad free commented 5 years ago

Thank You!

I want to replace the standard JS alert with custom MDBAlert. It won't need a button to trigger the alert, the alert could come from the wrong password when trying to authenticate.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.19.0
  • Device: Laptop
  • Browser: Firefox
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags