What I want to do is add bootstrap-react modal and fire it from a stateless function. All the examples I can find requires changing the "show" in the state of component, but since Im not using af component I don't really have an idea how to do it.
https://react-bootstrap.github.io/components/modal/
https://react-bootstrap.github.io/components/modal/
You need state somewhere to show the modal. You can use hooks to do it in functional (not really "stateless") component using useState.
function App() {
const [open, setOpen] = useState(false);
return (
<>
<Button variant="primary" onClick={() => setOpen(true)}>
Launch demo modal
</Button>
<Modal show={open} onHide={() => setOpen(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={() => setOpen(false)}>
Close
</Button>
<Button variant="primary" onClick={() => setOpen(false)}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
codesandbox: https://codesandbox.io/embed/z2ky5l128l
If you don't want to do it then you need to pass prop from component that is higher in tree, like:
class App extends React.Component {
state = {
open: true,
}
render() {
return <ModalComponent open={open} hide={() => this.setState({open: false})} />
}
}
function ModalComponent = ({open, hide}) => (
<Modal show={open} onHide={hide}>
<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={hide}>
Close
</Button>
</Modal.Footer>
</Modal>
)
just pass visible state from parrent like below
class parent extends Component {
state = {
modalVisibility : false
}
handleModalVisibility = (action)=> this.setState({modalVisibility : action})
return (
<div>
<button onClick={this.handleModalVisibility.bind(this,true)} >Show Modal</button>
//use this props to show or cancel the modal
<ModalComponent visibility ={this.state.modalVisibility} handleModal={this.handleModalVisibility} />
</div>
)
}
I guess you can do that with useState
https://reactjs.org/docs/hooks-state.html
Related
So I have a site which has 12 buttons. 6 of these buttons will need to launch a popup with a different video and 6 buttons will need to launch a popup with 6 images.
Now, currently, I am experimenting with a single popup displaying an image. And this is fairly easy, I set a state
const [showModal, setShowModal] = useState(false);
And then I have a button which will set the show onClick and then a model is shown - eg
<button className="buttonGeneral" onClick={()=>setShowModal(true)}>SUMMARY11</button> <ModalReact showModal={showModal} onClose={() => setShowModal(false)} image={props.image_1} size='med'/>
Thinking about this, I am thinking I will need 2 different types of modals, one for video and one for images. But with the approach above, I am going to need to useState with 12 different states. This seems a bit wrong, but I cannot think of any other way.
For completeness, here is the ModalReact component
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import '../styles/react-bs.css';
function ModalReact({showModal = false, onClose = () =>{}, image, size}) {
console.log("im ", image)
return (
<Modal
size={size}
show={showModal}
onHide={onClose}
backdrop="static"
keyboard={false}
// dialogClassName="videoPopup"
>
<Modal.Body><img src={image} alt="lala"></img></Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={onClose}>
Close
</Button>
</Modal.Footer>
</Modal>
)
}
export default ModalReact
You need to maintain different states for all the buttons. I would suggest writing a custom component with its state maintained in the same component so that it's available for only that component. Based on that, we can open a modal from its state variable.
export default function ModalReact({ itemNum }) {
const [showModal, setShowModal] = useState(false);
const handleClose = () => setShowModal(false);
const handleShow = () => setShowModal(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Launch demo modal {itemNum}
</Button>
<div style={{ display: "block", width: 700, padding: 30 }}>
<Modal show={showModal} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading {itemNum}</Modal.Title>
</Modal.Header>
<Modal.Body>
Woohoo, you're reading this text in a modal! {itemNum}
{itemNum > 6 ? "image" : "video"}
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</div>
</>
);
}
We can use that from any component. You said you have 12 buttons so iterate and display all those buttons. I have used a simple array and iterating to display all the buttons.
return (
<div className="container">
{Array.from({ length: 12 }, (_, i) => i + 1).map((item) => (
<CustomModal itemNum={item} />
))}
</div>
);
Attached is a sandbox for reference.
I am trying to put a modal dialog using react-bootstrap and having issues.
I have a "HintComponent" which consists of a bunch of buttons
<div className="col-5 d-grid gap-2 borderGeneral">
<button className="buttonGeneral" >Label here</button>
<button className="buttonGeneral">SUMMARY</button>
</div>
and I want to launch a Modal dialog on clicking a button.
Looking at the react-bootstrap site, I have the following (taken straight from the site)
import React, {useState} from 'react';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import render from 'react-dom';
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}>
<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>
</>
);
}
render(<Example />);
My issue is - how do I call the Modal from the HintComponent? If I try to import the Modal (in this case ) and call it as just I get a warning about module having no exports.
Can anyone give me a hint?
Hi very simple you need to use this component in your HintComponent and pass a prop showModal={true} but before this, you need to receive that prop in your modal component and set it in state using React.useEffect
So your final code will be like below:
ModalComponent
import React, {useState} from 'react';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import render from 'react-dom';
function Example(props) {
const {showModal = false, onClose = ()=>{}} = props;
const [show, setShow] = useState(showModal);
React.useEffect(()=>{
setShow(showModal);
},[showModal]);
const handleClose = () => {
setShow(false);
// just to have custom function for modal close which will be used can be used in HintComponent maybe you want to perform somehting else after modal close.
typeof onClose === 'function' && onClose();
};
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Launch demo modal
</Button>
<Modal show={show} onHide={handleClose}>
<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>
</>
);
}
render(<Example />);
I would recommend do not manage Modal visibility in its component but control it from the parent component in your case HintComponent.
Any idea for modal component without using hooks, and use it inside another, class-based component?
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}>
<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>
</>
);
}
render(<Example />);
// example.js
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}>
<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 Example;
// other-component.js
import Example from './example.js'
function OtherComponent() {
return (
<>
<Example />
</>
);
}
class dashboard extends Component {
constructor(props) {
super(props);
this.state = {
show: false,
msg: false
}
}
handelModal1() {
this.setState({ show: !this.state.show })
}
handelModal2() {
this.setState({ msg: !this.state.msg })
}
render() {
return (
<div>
<>
<Button variant="primary" onClick={() => { this.handelModal1() }}
one
</Button>
<Modal show={this.state.show} >
<Modal.Header>
<Modal.Title>Modal one</Modal.Title>
</Modal.Header>
<Modal.Body> hello </Modal.Body>
<Modal.Footer>
<Button onClick={() => { this.handelModal1() }}>
OK
</Button>
</Modal.Footer>
</Modal>
</>
</div>
<div>
<>
<Button variant="primary" onClick={() => { this.handelModal2() }}
two
</Button>
<Modal msg={this.state.msg} >
<Modal.Header>
<Modal.Title>Modal two</Modal.Title>
</Modal.Header>
<Modal.Body> hello </Modal.Body>
<Modal.Footer>
<Button onClick={() => { this.handelModal2() }}>
OK
</Button>
</Modal.Footer>
</Modal>
</>
</div>
)
}
I am trying to use two modals on the same page.
The first modal is working and I'm getting the pop-up, but the second modal is now working.
There is no pop up when I click on the second modal. Is there any simple way to use two modals on the same page???
You have to set <Modal show={this.state.msg} > Instead<Modal msg={this.state.msg} >
or
Maybe this link will help you React Rendering Multiple Modals in Same Component
I am creating a web application with react.js also using react-bootstrap.
What I want to accomplish is when user click on button then modal will appear but that is not happening.
Button code
<div className="rightButtons">
<button name="updateItem" className="btn btn-primary" onClick={() => { this.onUpdateItem(this.props.selectedAppTypeId)}} >Update Item</button>
</div>
function which will be called.
onUpdateItem = (id) => {
return (
<div className="static-modal">
<Modal.Dialog>
<Modal.Header>
<Modal.Title>Modal title</Modal.Title>
</Modal.Header>
<Modal.Body>One fine body...</Modal.Body>
<Modal.Footer>
<Button>Close</Button>
<Button bsStyle="primary">Save changes</Button>
</Modal.Footer>
</Modal.Dialog>
</div>
);
}
Any help would be great help. Thanks.
You are returning HTML into your onClick handler, and not into the Component's render method. If you want to show HTML content after an onClick, you need to actually return those HTML elements within the actual render. Try this:
class Component extends React.Component {
state = {
showModal: false
}
renderModal = () => {
return (
<div className="static-modal">
<Modal.Dialog>
<Modal.Header>
<Modal.Title>Modal title</Modal.Title>
</Modal.Header>
<Modal.Body>One fine body...</Modal.Body>
<Modal.Footer>
<Button>Close</Button>
<Button bsStyle="primary">Save changes</Button>
</Modal.Footer>
</Modal.Dialog>
</div>
);
}
render() {
return(
<div>
<button onClick={() => this.setState({showModal:true})}> Show </button>
{this.state.showModal && this.renderModal()}
</div>
)
}
}
Edit: You can also export that entire Modal return statement into its own component, and conditionally render the component when the showModal state is true.
const ModalComponent = (props) => {
return(
<div className="static-modal">
<Modal.Dialog>
<Modal.Header>
<Modal.Title>Modal title</Modal.Title>
</Modal.Header>
<Modal.Body>One fine body...</Modal.Body>
<Modal.Footer>
<Button>Close</Button>
<Button bsStyle="primary">Save changes</Button>
</Modal.Footer>
</Modal.Dialog>
</div>
)
}
class ParentComponent extends React.Component {
state = {
showModal: false
}
render(){
return(
<div>
<button onClick={() => this.setState({showModal:true})}>
Show Modal
</button>
{this.state.showModal && <ModalComponent id='0af141random'/>}
</div>
)
}
}
The problem that you have is that you're passing a react function component as an event handler; the return value of the function is a react component, but calling the function by itself won't mount that component in the DOM and display it.
A better way to make this happen might be to place your Modal component in your component hiearchy, and control whether it is shown by using a callback to change the state of a parent component.
Something like this:
class ParentComponent extends React.Component {
showModal() {
this.setState{
modalActive: true;
}
}
render() {
<div>
<Button onClick={showModal}>Show me the modal!</Button>
<Modal active={this.state.modalActive} />
</div>
}
}
const modalComponent = (props) => {
return (<div style={{ display: (props.isActive) ? "block" : "none "}}>
<h1>I'm a modal!</h1>
</div>)
}
I haven't checked, but I'm sure React Bootstrap has its own prop for displaying/hiding modals.
EDIT: Here's a code example from the react bootstrap documentation that shows it in use https://react-bootstrap.github.io/components/modal/#modals-live