Open bootstrap modal after axios http call in react - reactjs

Question

I made an HTTP call in react using Axios. It works perfectly fine. But when I try to open a bootstrap 4 modal after HTTP call success. It shows me an error 'modal is not a function'. I try a number of ways to solve this but unable to solve the problem. I didn't upload the whole code as it is quite long. Let me know in the comments if you want any additional code sample. Please help.
import $ from 'jquery';
import '../assets/css/signup.css';
import { Link } from 'react-router-dom';
import axios from 'axios';
import SuccessMessage from './dashboard/SuccessMessage';
class SignUp extends React.Component{
constructor()
{
super()
this.state={
firstName:'',
lastName:'',
email:'',
phoneNumber:'',
password:'',
confirmPassword:'',
isSignUp:false
}
}
componentDidUpdate()
{
if(this.state.isSignUp === true)
{
let user = {
firstName: this.state.firstName,
lastName: this.state.lastName,
email:this.state.email,
phoneNumber:this.state.phoneNumber,
password:this.state.password
}
console.log(user);
var first_name = user.firstName;
var last_name=user.lastName;
var email=user.email;
var phone_no=user.phoneNumber;
var password = user.password;
axios.post("http://ec2-14-2a9-69-0b6.us-west-2.compute.amazonaws.com:4000/dashboard/register", {
first_name,
last_name,
email,
phone_no,
password
}, {
headers: header
})
.then(res => {
console.log(res);
if(res.status === 200 && res.data.success === true)
{
setTimeout(() =>
{
$('#signup-success').modal('show');
},200)
}
})
}
}
handleSubmit=(e) =>
{
e.preventDefault();
this.setState({isSignUp:true});
}
render()
{
return(
<SuccessMessage heading="Sign Up Successfully!" description="Please login in to access your account" iconClass="fa fa-check bg-golden flex all-center border-radius-50" modalId="signup-success"/>
)
}
Success Message component
<div className="modal" id={this.props.modalId}>
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header">
<h4 className="modal-title">Modal Heading</h4>
<button type="button" className="close" data-dismiss="modal">×</button>
</div>
<div className="modal-body align-center" style={style}>
<i style={icon} className={this.props.iconClass} ></i>
<h3 className="heading color-black">{this.props.heading}</h3>
<p className="paragraph color-black">{this.props.description}</p>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Answer 1

Try not to use jquery and react together. You could achieve what you are saying using the react state:
class SignUp extends React.Component{
constructor()
{
super()
this.state={
firstName:'',
lastName:'',
email:'',
phoneNumber:'',
password:'',
confirmPassword:'',
isSignUp:false,
showModal: false
}
}
componentDidUpdate()
{
if(this.state.isSignUp === true)
{
let user = {
firstName: this.state.firstName,
lastName: this.state.lastName,
email:this.state.email,
phoneNumber:this.state.phoneNumber,
password:this.state.password
}
console.log(user);
var first_name = user.firstName;
var last_name=user.lastName;
var email=user.email;
var phone_no=user.phoneNumber;
var password = user.password;
axios.post("http://ec2-14-2a9-69-0b6.us-west-2.compute.amazonaws.com:4000/dashboard/register", {
first_name,
last_name,
email,
phone_no,
password
}, {
headers: header
})
.then(res => {
console.log(res);
if(res.status === 200 && res.data.success === true)
{
setTimeout(() =>
{
this.setState({ showModal: true });
},200)
}
})
}
}
handleSubmit=(e) =>
{
e.preventDefault();
this.setState({isSignUp:true});
}
render()
{
return(
<div>
{
this.state.showModal &&
<SuccessMessage heading="Sign Up Successfully!" description="Please login in to access your account" iconClass="fa fa-check bg-golden flex all-center border-radius-50" modalId="signup-success"/>
</div>
)
}
Also, I guess you got a display: none or something in the modal as you are doing a .show using jquery. Put that to display always as it will be only shown if the state is true.

Answer 2

Actually getting the Bootstrap Modal to display using React (without jQuery) requires DOM manipulation. Bootstrap 4 uses jQuery to add a modal backdrop element, adds the modal-open class to the body, and finally adds display:block to the .modal wrapper.
This is why it's preferable to using reactstrap, react-bootstrap, etc... since they've already componentized the Bootstrap Modal.
If you must show (toggle) the Bootstrap Modal in React without jQuery (or other component framework), here's an example:
class SuccessMessage extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
modalClasses: ['modal','fade']
}
}
toggle() {
document.body.className += ' modal-open'
let modalClasses = this.state.modalClasses
if (modalClasses.indexOf('show') > -1) {
modalClasses.pop()
//hide backdrop
let backdrop = document.querySelector('.modal-backdrop')
document.body.removeChild(backdrop)
}
else {
modalClasses.push('show')
//show backdrop
let backdrop = document.createElement('div')
backdrop.classList = "modal-backdrop fade show"
document.body.appendChild(backdrop)
}
this.setState({
modalClasses
})
}
render() {
return (
<div
id="messageModal"
className={this.state.modalClasses.join(' ')}
tabIndex="-1"
role="dialog"
aria-hidden="true"
ref="messageModal"
>
<div className="modal-dialog modal-dialog-centered modal-lg">
<div className="modal-content">
<div className="modal-header">
<h4>
Success
</h4>
...
</div>
<div className="modal-body">
...
</div>
</div>
</div>
</div>
)
}
}
Working Demo: https://codeply.com/p/4EV36QjwCB