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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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