Open a modal on another modal with ReactJS - javascript

I made a modal using Bootstrap, however I need a confirmation modal that goes above it. This second one will appear as a confirmation dialog for when one of the first modal's buttons are pressed.
This is roughly what my code looks like:
constructor(props) {
super(props)
this.state = {
displayConfirmModal: false
}
}
confirmModal () {
return (
<div ref={(ref) => { (this.modal = ref) }} className='modal fade' id='confirm' tabIndex={-1} role='dialog' aria-labelledby='GPA Modal'>
<section>
<h3>Are you sure of this?</h3>
<button
className='btn btn-danger'
onClick={()=> doTheThing()}>
Yes
</button>
<button
className='btn btn-danger'
onClick={()=> hideConfirmModal()}>
No
</button>
</section>
</div>
)
}
render () {
return (
<div>
<div ref={(ref) => { (this.modal = ref) }} className='modal fade' id='main' tabIndex={-1} role='dialog' aria-labelledby='GPA Modal'>
<section>
<a className='close' data-dismiss='modal' aria-label='Close' onClick={() => this.hideModal()}>close</a>
<div className='frame'>
<h1>My first modal</h1>
<button
className='btn btn-default'
onClick={() => { this.setState({displayConfirmModal: true})}}>
Open confirmation modal
</button>
</div>
</section>
</div>
{ this.state.displayConfirmModal ? this.confirmModal() : null }
</div>
)
}
As it is right now when I click on the Open confirmation modal button, it sets my displayConfirmModal state to true, but doesn't display the modal.
However, if I start the displayConfirmModal state on true, it does display it, and when I close it, it closes the whole thing.
How do I do this? And if so, is there a better alternative way of doing this?
Thanks!

Related

How to open a different modal that is inside of a list?

I'm using react and have a list with images, when hovered them it shows a text and when clicked it opens a modal, but each "li" has different content that goes in the modal. The problems is that every item of the list open only one modal, the last one, how can I do to open the correct modal?
Modal code
constructor(props) {
super(props);
this.state = {
visible : false
}
}
openModal() {
this.setState({
visible : true,
});
}
closeModal() {
this.setState({
visible : false,
});
}
list with the modal
<li className="bor">
<img src={bor}/>
<span className="first">teste</span>
<span className="second">veja o case completo</span>
<input type="button" onClick={() => this.openModal()} />
<section>
<Modal className="modal" visible={this.state.visible} width="90%" height="90%" effect="fadeInUp" onClickAway={() => this.closeModal()}>
<div className="close">
<a href="javascript:void(0);" onClick={() => this.closeModal()}>X</a>
</div>
<div>
<h1>teste1</h1>
</div>
</Modal>
</section>
</li>
<li className="baz">
<img src={baz}/>
<span className="first">teste2</span>
<span className="second">veja o case completo</span>
<input type="button" onClick={() => this.openModal()} />
<section>
<Modal className="modal" visible={this.state.visible} width="90%" height="90%" effect="fadeInUp" onClickAway={() => this.closeModal()}>
<div className="close">
<a href="javascript:void(0);" onClick={() => this.closeModal()}>X</a>
</div>
<div>
<h1>teste2</h1>
</div>
</Modal>
</section>
</li>
As #FatemehQasemkhani said it is best practice to use single modal & pass corresponding data like below. I approaced same way & it is working fine. I am taking some dummy data inside items. Whenever user is clicking on any list(li) item I am storing that currrent clicked item inside activeItemData and passing that value in modal.
import React, { Component } from "react";
import Modal from "react-awesome-modal";
class ProList extends Component {
constructor(props) {
super(props);
this.state = {
visible: false,
activeItemData: "",
items: [
{
desc: "this is item 1 "
},
{
desc: "this is item 2"
}
]
};
}
closeModal() {
this.setState({
visible: false
});
}
handleCurrentItem = item => {
// you can set two properties in setState or you can set visible property in callback also...
this.setState(
{
activeItemData: item.desc,
visible:true
},
// () => this.setState({ visible: true })
)
};
render() {
return (
<div>
<ul>
{ this.state.items.map(item => (
<li key={item.desc} onClick={() => this.handleCurrentItem(item)}>
{item.desc}
</li>
))}
</ul>
<Modal
className="modal"
visible={this.state.visible}
width="90%"
height="90%"
effect="fadeInUp"
onClickAway={() => this.closeModal()}
>
<div className="close">
<a href="javascript:void(0);" onClick={() => this.closeModal()}>
X
</a>
</div>
<div>
<h1>{this.state.activeItemData}</h1>
</div>
</Modal>
</div>
)
}
}

How to change background image of specific div with 'onclick' function in React.JS

Thanks for helping my needy butt.
I am working with ReactJS and trying to get a div to change it's background from a color to a specific image url on click of a button in a modal.
I have tried many things and keep getting this error:
TypeError: Cannot read property 'style' of null
I successfully console.log the image URL and div ID within the onclick function, but the div styling is getting nowhere...All help is appreciated!
Here is my button
<button onClick={() => { this.changeUserBG(this.state.AlexPics[0], "one") }} className="btn btn-danger">Kaalia of the Vast</button>
here is the function I call
changeUserBG = (imageUrl, userArea) => {
let thisOne = document.getElementById(userArea);
console.log(thisOne)
thisOne.style.backgroundColor = 'red'
// document.getElementById("one").style.backgroundImage = `require(url(${imageUrl}))`;
}
Here is the div area I am trying to manipulate:
<div className="col-6" id="one">
<div className="">
<p className="lifeArea">
<button className="minusOne" onClick={() => {
this.subtractOne("playerOne") }}>-1</button>
<span id="playerOne">40</span>
<button className="plusOne" onClick={() => {
this.addOne("playerOne") }}>+1</button>
</p>
{/* Theme Modal that has ASK sub modals */}
<p className="bgCheckButton">
<button type="button" className="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">Theme</button>
</p>
</div>
wanna talk mtg? down for that too!
In react, you should not use getElementById or any method changing the dom.
You could have something like this:
<div style={{backgroundImage: this.state.image}}>...</div>
So whenever you do:
this.setState({ image: 'some_value.png' });
the background image will be updated automatically.
In your case, if you need to change different div background based on div ID, you could store a map in your state, something like this:
clickHandler = (divId, color) => {
this.setState(state => ({ backgroundColors: { [divId]: color, ...state.backgroundColors} }));
}
The line of code above might be hard to understand at first if you are not used to the spread operator, but what it does is actually simple: it adds a new key to map backgroundColors stored in the state.
And you would use it as such:
<div id="foo" style={{ backgroundImage: this.state.backgroundColors["foo"]}}>...</div>
You can use React ref api to get the refrence of the div and then you can change the style property of the div.
Sample Code
In Class constructor
constructor() {
this.userAreaRef = React.createRef();
}
changeUserBG = (imageUrl, userArea) => {
let thisOne = this.userAreaRef;
console.log(thisOne)
thisOne.current.style.backgroundColor = 'red'
}
Render
<div ref={this.userAreaRef} className="col-6" id="one">
<div className="">
<p className="lifeArea">
<button className="minusOne" onClick={()=> {
this.subtractOne("playerOne") }}>-1</button>
<span id="playerOne">40</span>
<button className="plusOne" onClick={()=> {
this.addOne("playerOne") }}>+1</button>
</p>
{/* Theme Modal that has ASK sub modals */}
<p className="bgCheckButton">
<button type="button" className="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">Theme</button>
</p>
</div>
</div>
In functional component
const someFunction = () => {
const userAreaRef = useRef();
changeUserBG = (imageUrl, userArea) => {
let thisOne = userAreaRef;
console.log(thisOne)
thisOne.current.style.backgroundColor = 'red'
}
return (
<div ref={this.userAreaRef} className="col-6" id="one">
<div className="">
<p className="lifeArea">
<button className="minusOne" onClick={()=> {
this.subtractOne("playerOne") }}>-1</button>
<span id="playerOne">40</span>
<button className="plusOne" onClick={()=> {
this.addOne("playerOne") }}>+1</button>
</p>
{/* Theme Modal that has ASK sub modals */}
<p className="bgCheckButton">
<button type="button" className="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">Theme</button>
</p>
</div>
</div>
);
}

created a pop up modal with no error but it isnt showing the image/description

Created a catalog, when you click on the "more info" button a pop up modal. pops up but the image and description isnt showing in the pop up modal
let { itemInfo } = this.props;
let removeCom;
if (itemInfo.description) {
removeCom = itemInfo.description
.replace("?", "")
.replace('<td width="110" height="">', "")
.replace("http://extranet.acetools.com/Catalog/",
"assets/img/items/")
.replace((/<INPUT[^>]*>/gmi), "")
.split('<CENTER><FONT COLOR="RED">', 1);
console.log(removeCom);
}
return (
<h6 className="card-header" style={cardHeader}>
Item # {this.props.itemInfo.item_no} - {this.props.itemInfo.item}
</h6>
<div className="card-body" style={cardBody}>
<div className="row">
<div className="col-6" dangerouslySetInnerHTML={{__html:
removeCom}} style={text}>
</div>
<div className="col-6">
<img src={this.props.itemInfo.image} alt="" style= .
{productImg}></img>
</div>
{/* <div>hello</div> */}
</div>
<div className="row">
<button className="btn btn-outline-primary" onClick= .
{this.props.onClose} style={closeButton}>
Close
</button>
Franky, check this example out:
import { Button, Text, View } from 'react-native'
class ErrorModal extends React.Component {
render() {
const { modal: { closeModal, params } } = this.props
return (
<View>
<Text>An error occured!</Text>
<Text>{params.errorMessage}</Text>
<Button onPress={closeModal} title="OK" />
</View>
)
}
}
export default ErrorModal
Check to see if you're passing props through use of destructuring and check your routes. I hope this helps.

open modal in foundation using reactjs

I am using foundation for css. When an icon is clicked to add persona, a modal should appear. How can i open a modal without using jquery?
Here is my code
export default class Campaign extends Component {
state = {
adsShow: false,
personasShow: false
};
handlePersonasClick = () =>
this.setState({ personasShow: !this.state.personasShow });
renderCampaigns = () => {
return campaigns.map((campaign, i) => {
return (
<Collapsible
key={campaign.name}
trigger={this.campaignTitle(campaign)}
classParentString="campaignsCollapse">
<div className="Ads">
<span className="cmpTitle">Ads</span>
<span className="editCampaign">
<FaPlusCircle onClick={this.handleClick} />
</span>
</div>
<div className="AdsList">
{this.state.adsShow
? <CreateNewAd
personasClick={this.handlePersonasClick}
personasShow={this.state.personasShow}
/>
: null}
{this.renderAdLists(campaign.ads)}
</div>
</Collapsible>
);
});
};
render() {
return (
<div style={{ padding: '10px 20px' }}>
<h3>Campaigns</h3>
<div className="campaignsContainer">
{this.renderCampaigns()}
</div>
</div>
);
}
}
const CreateNewAd = props => {
return (
<Collapsible trigger={adsTitle()} classParentString="adsCollapse" open>
<p>
Personas
{' '}
<span><FaPlusCircle onClick={props.personasClick} /></span>
{props.personasShow ? <Personas /> : null}
</p>
</Collapsible>
);
};
export const Personas = () => {
return (
<div
id="myModal"
className="reveal-modal"
data-reveal
aria-labelledby="modalTitle"
aria-hidden="true"
ref={modal => {
this.modal = modal;
}}
role="dialog">
<h2 id="modalTitle">Awesome. I have it.</h2>
<a className="close-reveal-modal" aria-label="Close">×</a>
</div>
);
};
the following code snippet is on the CreateNewAd component which is a child component of Campaign Component. When FaPlusCircle icon is clicked a modal should appear. How can i do that when following top to bottom approach and without using jquery ?
UPDATE
have created a sandbox. here is the link https://codesandbox.io/s/qx9Pv1lry . You have to click on magazine print. An accordion menu shows up. After that click on click text that is aside Ads text. There you will see open modal text. Where clicking should open a modal which is what the question is about.

Bootstrap modal in React.js

I need to open a Bootstrap Modal from clicking on a button in a Bootstrap navbar and other places (to show data for a component instance, ie. providing "editing" functionality), but I don't know how to accomplish this. Here is my code:
EDIT: Code updated.
ApplicationContainer = React.createClass({
render: function() {
return (
<div className="container-fluid">
<NavBar />
<div className="row">
<div className="col-md-2">
<ScheduleEntryList />
</div>
<div className="col-md-10">
</div>
</div>
<ScheduleEntryModal />
</div>
);
}
});
NavBar = React.createClass({
render: function() {
return (
<nav className="navbar navbar-default navbar-fixed-top">
<div className="container-fluid">
<div className="navbar-header">
<a className="navbar-brand" href="#">
<span className="glyphicon glyphicon-eye-open"></span>
</a>
</div>
<form className="navbar-form navbar-left">
<button className="btn btn-primary" type="button" data-toggle="modal" data-target="#scheduleentry-modal">
<span className="glyphicon glyphicon-plus">
</span>
</button>
</form>
<ul className="nav navbar-nav navbar-right">
<li><span className="glyphicon glyphicon-user"></span> Username</li>
</ul>
</div>
</nav>
);
}
});
ScheduleEntryList = React.createClass({
getInitialState: function() {
return {data: []}
},
loadData: function() {
$.ajax({
url: "/api/tasks",
dataType: "json",
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, error) {
console.error("/api/tasks", status, error.toString());
}.bind(this)
});
},
componentWillMount: function() {
this.loadData();
setInterval(this.loadData, 20000);
},
render: function() {
items = this.state.data.map(function(item) {
return <ScheduleEntryListItem item={item}></ScheduleEntryListItem>;
});
return (
<div className="list-group">
<a className="list-group-item active">
<h5 className="list-group-item-heading">Upcoming</h5>
</a>
{items}
</div>
);
}
});
ScheduleEntryListItem = React.createClass({
openModal: function() {
$("#scheduleentry-modal").modal("show");
},
render: function() {
deadline = moment(this.props.item.deadline).format("MMM Do YYYY, h:mm A");
return (
<a className="list-group-item" href="#" onClick={this.openModal}>
<h5 className="list-group-item-heading">
{this.props.item.title}
</h5>
<small className="list-group-item-text">
{deadline}
</small>
</a>
);
}
});
Modal = React.createClass({
componentDidMount: function() {
$(this.getDOMNode())
.modal({backdrop: "static", keyboard: true, show: false});
},
componentWillUnmount: function() {
$(this.getDOMNode())
.off("hidden", this.handleHidden);
},
open: function() {
$(this.getDOMNode()).modal("show");
},
close: function() {
$(this.getDOMNode()).modal("hide");
},
render: function() {
return (
<div id="scheduleentry-modal" className="modal fade" tabIndex="-1">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 className="modal-title">{this.props.title}</h4>
</div>
<div className="modal-body">
{this.props.children}
</div>
<div className="modal-footer">
<button type="button" className="btn btn-danger pull-left" data-dismiss="modal">Delete</button>
<button type="button" className="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
)
}
});
ScheduleEntryModal = React.createClass({
render: function() {
var modal = null;
modal = (
<Modal title="Add Schedule Entry">
<form className="form-horizontal">
<div className="form-group">
<label htmlFor="title" className="col-sm-2 control-label">Title</label>
<div className="col-sm-10">
<input id="title" className="form-control" type="text" placeholder="Title" ref="title" name="title"/>
</div>
</div>
<div className="form-group">
<label htmlFor="deadline" className="col-sm-2 control-label">Deadline</label>
<div className="col-sm-10">
<input id="deadline" className="form-control" type="datetime-local" ref="deadline" name="deadline"/>
</div>
</div>
<div className="form-group">
<label htmlFor="completed" className="col-sm-2 control-label">Completed</label>
<div className="col-sm-10">
<input id="completed" className="form-control" type="checkbox" placeholder="completed" ref="completed" name="completed"/>
</div>
</div>
<div className="form-group">
<label htmlFor="description" className="col-sm-2 control-label">Description</label>
<div className="col-sm-10">
<textarea id="description" className="form-control" placeholder="Description" ref="description" name="description"/>
</div>
</div>
</form>
</Modal>
);
return (
<div className="scheduleentry-modal">
{modal}
</div>
);
}
});
Other comments and improvements to the code are appreciated.
I was recently looking for a nice solution to this without adding React-Bootstrap to my project (as Bootstrap 4 is about to be released).
This is my solution: https://jsfiddle.net/16j1se1q/1/
let Modal = React.createClass({
componentDidMount(){
$(this.getDOMNode()).modal('show');
$(this.getDOMNode()).on('hidden.bs.modal', this.props.handleHideModal);
},
render(){
return (
<div className="modal fade">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 className="modal-title">Modal title</h4>
</div>
<div className="modal-body">
<p>One fine body…</p>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" className="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
)
},
propTypes:{
handleHideModal: React.PropTypes.func.isRequired
}
});
let App = React.createClass({
getInitialState(){
return {view: {showModal: false}}
},
handleHideModal(){
this.setState({view: {showModal: false}})
},
handleShowModal(){
this.setState({view: {showModal: true}})
},
render(){
return(
<div className="row">
<button className="btn btn-default btn-block" onClick={this.handleShowModal}>Open Modal</button>
{this.state.view.showModal ? <Modal handleHideModal={this.handleHideModal}/> : null}
</div>
);
}
});
React.render(
<App />,
document.getElementById('container')
);
The main idea is to only render the Modal component into the React DOM when it is to be shown (in the App components render function). I keep some 'view' state that indicates whether the Modal is currently shown or not.
The 'componentDidMount' and 'componentWillUnmount' callbacks either hide or show the modal (once it is rendered into the React DOM) via Bootstrap javascript functions.
I think this solution nicely follows the React ethos but suggestions are welcome!
You can use React-Bootstrap (https://react-bootstrap.github.io/components/modal). There is an example for modals at that link. Once you have loaded react-bootstrap, the modal component can be used as a react component:
var Modal = ReactBootstrap.Modal;
can then be used as a react component as
<Modal/>.
For Bootstrap 4, there is react-strap (https://reactstrap.github.io). React-Bootstrap only supports Bootstrap 3.
getDOMNode() is deprecated. Instead use ref to access DOM element. Here is working Modal component (Bootstrap 4).
Decide whether to show or not to show Modal component in parent component.
Example: https://jsfiddle.net/sqfhkdcy/
class Modal extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
$(this.modal).modal('show');
$(this.modal).on('hidden.bs.modal', handleModalCloseClick);
}
render() {
return (
<div>
<div className="modal fade" ref={modal=> this.modal = modal} id="exampleModal" tabIndex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">Modal title
</h5>
<button type="button" className="close" data- dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
...
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data- dismiss="modal">Close</button>
<button type="button" className="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
);
}
}
Edit:
Here are the necessary imports to make it work:
import $ from 'jquery';
window.jQuery = $;
window.$ = $;
global.jQuery = $;
I've only used bootstrap cdn (css + js) to achieve "reactstrap" like solution. I've used props.children to pass dynamic data from parent to child components. You can find more about this here. In this way you have three separate components modal header, modal body and modal footer and they are totally independent from each other.
//Modal component
import React, { Component } from 'react';
export const ModalHeader = props => {
return <div className="modal-header">{props.children}</div>;
};
export const ModalBody = props => {
return <div className="modal-body">{props.children}</div>;
};
export const ModalFooter = props => {
return <div className="modal-footer">{props.children}</div>;
};
class Modal extends Component {
constructor(props) {
super(props);
this.state = {
modalShow: '',
display: 'none'
};
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
}
openModal() {
this.setState({
modalShow: 'show',
display: 'block'
});
}
closeModal() {
this.setState({
modalShow: '',
display: 'none'
});
}
componentDidMount() {
this.props.isOpen ? this.openModal() : this.closeModal();
}
componentDidUpdate(prevProps) {
if (prevProps.isOpen !== this.props.isOpen) {
this.props.isOpen ? this.openModal() : this.closeModal();
}
}
render() {
return (
<div
className={'modal fade ' + this.state.modalShow}
tabIndex="-1"
role="dialog"
aria-hidden="true"
style={{ display: this.state.display }}
>
<div className="modal-dialog" role="document">
<div className="modal-content">{this.props.children}</div>
</div>
</div>
);
}
}
export default Modal;
//App component
import React, { Component } from 'react';
import Modal, { ModalHeader, ModalBody, ModalFooter } from './components/Modal';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({ modal: !this.state.modal });
}
render() {
return (
<div className="App">
<h1>Bootstrap Components</h1>
<button
type="button"
className="btn btn-secondary"
onClick={this.toggle}
>
Modal
</button>
<Modal isOpen={this.state.modal}>
<ModalHeader>
<h3>This is modal header</h3>
<button
type="button"
className="close"
aria-label="Close"
onClick={this.toggle}
>
<span aria-hidden="true">×</span>
</button>
</ModalHeader>
<ModalBody>
<p>This is modal body</p>
</ModalBody>
<ModalFooter>
<button
type="button"
className="btn btn-secondary"
onClick={this.toggle}
>
Close
</button>
<button
type="button"
className="btn btn-primary"
onClick={this.toggle}
>
Save changes
</button>
</ModalFooter>
</Modal>
</div>
);
}
}
export default App;
I Created this function:
onAddListItem: function () {
var Modal = ReactBootstrap.Modal;
React.render((
<Modal title='Modal title' onRequestHide={this.hideListItem}>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</Modal>
), document.querySelector('#modal-wrapper'));
}
And then used it on my Button trigger.
To 'hide' the Modal:
hideListItem: function () {
React.unmountComponentAtNode(document.querySelector('#modal-wrapper'));
},
You can use the model from the react-bootstrap from link and it's basically a function based
function Example() {
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={false}>
<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>
</>
);
}
and You can convert it into the class component
import React, { Component } from "react";
import { Button, Modal } from "react-bootstrap";
export default class exampleextends Component {
constructor(props) {
super(props);
this.state = {
show: false,
close: false,
};
}
render() {
return (
<div>
<Button
variant="none"
onClick={() => this.setState({ show: true })}
>
Choose Profile
</Button>
<Modal
show={this.state.show}
animation={true}
size="md" className="" shadow-lg border">
<Modal.Header className="bg-danger text-white text-center py-1">
<Modal.Title className="text-center">
<h5>Delete</h5>
</Modal.Title>
</Modal.Header>
<Modal.Body className="py-0 border">
body
</Modal.Body>
<Modal.Footer className="py-1 d-flex justify-content-center">
<div>
<Button
variant="outline-dark" onClick={() => this.setState({ show: false })}>Cancel</Button>
</div>
<div>
<Button variant="outline-danger" className="mx-2 px-3">Delete</Button>
</div>
</Modal.Footer>
</Modal>
</div>
);
}
}
You can try this modal:https://github.com/xue2han/react-dynamic-modal
It is stateless and can be rendered only when needed.So it is very easy to use.Just like this:
class MyModal extends Component{
render(){
const { text } = this.props;
return (
<Modal
onRequestClose={this.props.onRequestClose}
openTimeoutMS={150}
closeTimeoutMS={150}
style={customStyle}>
<h1>What you input : {text}</h1>
<button onClick={ModalManager.close}>Close Modal</button>
</Modal>
);
}
}
class App extends Component{
openModal(){
const text = this.refs.input.value;
ModalManager.open(<MyModal text={text} onRequestClose={() => true}/>);
}
render(){
return (
<div>
<div><input type="text" placeholder="input something" ref="input" /></div>
<div><button type="button" onClick={this.openModal.bind(this)}>Open Modal </button> </div>
</div>
);
}
}
ReactDOM.render(<App />,document.getElementById('main'));
Thanks to #tgrrr for a simple solution, especially when 3rd party library is not wanted (such as React-Bootstrap). However, this solution has a problem: modal container is embedded inside react component, which leads to modal-under-background issue when outside react component (or its parent element) has position style as fixed/relative/absolute. I met this problem and came up to a new solution:
"use strict";
var React = require('react');
var ReactDOM = require('react-dom');
var SampleModal = React.createClass({
render: function() {
return (
<div className="modal fade" tabindex="-1" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 className="modal-title">Title</h4>
</div>
<div className="modal-body">
<p>Modal content</p>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" className="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
);
}
});
var sampleModalId = 'sample-modal-container';
var SampleApp = React.createClass({
handleShowSampleModal: function() {
var modal = React.cloneElement(<SampleModal></SampleModal>);
var modalContainer = document.createElement('div');
modalContainer.id = sampleModalId;
document.body.appendChild(modalContainer);
ReactDOM.render(modal, modalContainer, function() {
var modalObj = $('#'+sampleModalId+'>.modal');
modalObj.modal('show');
modalObj.on('hidden.bs.modal', this.handleHideSampleModal);
}.bind(this));
},
handleHideSampleModal: function() {
$('#'+sampleModalId).remove();
},
render: function(){
return (
<div>
<a href="javascript:;" onClick={this.handleShowSampleModal}>show modal</a>
</div>
)
}
});
module.exports = SampleApp;
The main idea is:
Clone the modal element (ReactElement object).
Create a div element and insert it into document body.
Render the cloned modal element in the newly inserted div element.
When the render is finished, show modal. Also, attach an event listener, so that when modal is hidden, the newly inserted div element will be removed.
Reactstrap also has an implementation of Bootstrap Modals in React. This library targets Bootstrap version 4, whereas react-bootstrap targets version 3.X.
I got the following code working with bootstrap 5 and react hooks
const ref = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
if (ref.current) {
ref.myModal = new bootstrap.Modal(ref.current, { backdrop: true });
}
}, [ref]);
to show the modal i use this code inside my component
<button
className="btn btn-primary"
onClick={() => {
if (ref.myModal) {
ref.myModal.show();
}
}}
>
open modal
</button>
<div
className="modal fade"
tabIndex={-1}
aria-labelledby="uploadYoutubeModalLabel"
aria-hidden="true"
ref={ref}
>
<div className="modal-dialog">bla</div>
</div>
this binds myModel to the ref and you can call ref.myModal.show() to open the modal and ref.myModal.hide()
The quickest fix would be to explicitly use the jQuery $ from the global context (which has been extended with your $.modal() because you referenced that in your script tag when you did ):
window.$('#scheduleentry-modal').modal('show') // to show
window.$('#scheduleentry-modal').modal('hide') // to hide
so this is how you can about it on react
import React, { Component } from 'react';
export default Modal extends Component {
componentDidMount() {
window.$('#Modal').modal('show');
}
handleClose() {
window.$('#Modal').modal('hide');
}
render() {
<
div className = 'modal fade'
id = 'ModalCenter'
tabIndex = '-1'
role = 'dialog'
aria - labelledby = 'ModalCenterTitle'
data - backdrop = 'static'
aria - hidden = 'true' >
<
div className = 'modal-dialog modal-dialog-centered'
role = 'document' >
<
div className = 'modal-content' >
// ...your modal body
<
button
type = 'button'
className = 'btn btn-secondary'
onClick = {
this.handleClose
} >
Close <
/button> < /
div > <
/div> < /
div >
}
}
Just add href='#scheduleentry-modal' to the element you want to open the modal with
Or using jQuery: $('#scheduleentry-modal').modal('show');

Categories