I am trying to learn React Hooks with a Bootstrap Modal example. I have the following Modal (from the react bootstrap website).
import React, { useState } from "react";
import {Button, Modal} from 'react-bootstrap';
function SimpleModal() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Launch demo modal
</Button>
<Modal show={show} onHide={handleClose} animation={true}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
export default SimpleModal;
Inside an axios response I want to show this Modal
import React, { Component } from 'react';
import axios from 'axios';
import SimpleModal from "../components/SimpleModal"
export default class CreateInnovation extends Component {
constructor(props) {
super(props);
this.onChangeOwnerName = this.onChangeOwnerName.bind(this);
this.onChangeOwnerDepartment = this.onChangeOwnerDepartment.bind(this);
this.onChangeOwnerWorkLocation = this.onChangeOwnerWorkLocation.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.state = {
owner_name: '',
owner_department: '',
owner_work_location: ''
}
}
onChangeOwnerName(e) {
this.setState({
owner_name: e.target.value
});
}
onChangeOwnerDepartment(e) {
this.setState({
owner_department: e.target.value
});
}
onChangeOwnerWorkLocation(e) {
this.setState({
owner_work_location: e.target.value
});
}
onSubmit(e) {
e.preventDefault();
console.log(`Form submitted:`);
console.log(`Owner Name: ${this.state.owner_name}`);
console.log(`Owner Department: ${this.state.owner_department}`);
console.log(`Owner Work Location: ${this.state.owner_work_location}`);
const newInnovation = {
owner_name: this.state.owner_name,
owner_department: this.state.owner_department,
owner_work_location: this.state.owner_work_location
};
axios.post('http://localhost:4000/innov8/create', newInnovation)
.then(res => {
if (res.status === 200) {
console.log(res.data);
<SimpleModal show={"true"} />
}
}
);
// Purge state
this.setState({
owner_name: '',
owner_department: '',
owner_work_location: ''
})
}
render() {
return (
<div>
<h1 id="heading" className='margin'>Innovation<span className="badge badge-primary margin">A3</span></h1>
<h5 className='margin'>Your Details</h5>
<form id='Innovationform' onSubmit={this.onSubmit}>
<div className="container-fluid">
<div className="form-row">
<div className="col-sm ">
<input
id="owner"
type="text"
className="form-control"
value={this.state.owner_name}
onChange={this.onChangeOwnerName}
maxLength="40"
placeholder="Owner Name"
required
/>
</div>
<div className="col-sm">
<select id="department" className='form-control' value={this.state.owner_department} onChange={this.onChangeOwnerDepartment} required>
<option value="" disabled>Select Your Department</option>
<option value="acc">Accounts</option>
<option value="cat">Catering</option>
<option value="com">Commercial</option>
<option value="dig">Digitalisation & Business Transformation</option>
<option value="dri">Drilling</option>
<option value="ele">Electrical</option>
<option value="eng">Engineering</option>
<option value="fac">Facilities</option>
<option value="fin">Finance</option>
<option value="hse">HSE</option>
<option value="hum">Human Resources</option>
<option value="inf">Information Technology</option>
<option value="mar">Marine</option>
<option value="mec">Mechanical</option>
<option value="ops">Operations</option>
<option value="pay">Payroll</option>
<option value="pro">Procurement</option>
<option value="sub">Subsea</option>
<option value="tec">Technical</option>
<option value="war">Warehouse</option>
<option value="oth">Other</option>
</select>
</div>
<div className="col-sm ">
<select id="workplace" className='form-control' value={this.state.owner_work_location} onChange={this.onChangeOwnerWorkLocation} required>
<option value="" disabled>Select Your Workplace</option>
<option value="abe">Aberdeen</option>
<option value="car">Stena Carron</option>
<option value="don">Stena Don</option>
<option value="dri">Stena DrillMAX</option>
<option value="for">Stena Forth</option>
<option value="ice">Stena IceMAX</option>
<option value="spe">Stena Spey</option>
<option value="oth">Other</option>
</select>
</div>
</div>
</div>
<div className="container">
<div className="form-row">
<div className="col text-center">
<button id="formSubmit" type="submit" className="btn btn-primary center-block buttonload">Submit Your Innovation!</button>
</div>
</div>
</div>
</form>
</div>
)
}
}
My thinking is that I need to create the SimpleModal component and use the setShow hook to set "true". I have been searching for a few hours now & am struggling a tad. I have a button in the Modal function just now for testing, but I want to remove this button and only open the modal on success of the Axios response. Am I looking in the right direction?
Here is the solution You have to pass show in props to the model
Put this state into your I'm guessing createOwner component from which you shared onSubmit method
this.state= {
show: false,
owner_name: '',
owner_department: '',
owner_work_location: ''
}
Pass is down to the SimpleModal component in which you are rendering modal
Render modal in your create owner component.
<SimpleModal show={this.state.show} onClose={()=>{this.setState({show:false})}} />
In Your simpleModel File get it from props
import React, { useState } from 'react'
import { Button, Modal } from 'react-bootstrap'
function SimpleModal({ show, onClose }) {
return (
<>
<Modal show={show} onHide={onClose} animation={true}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={onClose}>
Close
</Button>
<Button variant="primary" onClick={onClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
)
}
export default SimpleModal