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 />
</>
);
}
Related
Unable to attach Event Listener to react-bootstrap modal for mouse events using ref
Getting TypeError: Modal.addEventListener is not a function while trying to attach event listener
Error message:
Below is sample code:
import React, { useRef,useState,useEffect } from "react";
import {Button,Modal} from 'react-bootstrap';
function ExampleModal() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const cardRef = useRef(null);
useEffect(()=>{
const Modal = cardRef?.current;
// ****TypeError: Modal.addEventListener is not a function*****
Modal?.addEventListener("mousedown",mousedownhandler );
return () => {
// unsubscribe event
Modal?.removeEventListener("mousedown", mousedownhandler);
}}
,[])
const mousedownhandler=()=>{console.log('mousedown on modal')}
return (
<>
<Button variant="primary" onClick={handleShow}>
Launch demo modal
</Button>
<Modal ref={cardRef} 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 ExampleModal;
I'm using a functional component in react to launch a popup form. I want to grab the values in the form on submission and was using the variable = React.createRef() and then a ref={variable} in the input field to retrieve them but I keep getting
Warning: findDOMNode is deprecated in Strictmode
error in the console. Is there a better way to do this?
Const AddProduct = (section) => {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
let itemName = React.createRef();
const createProduct = () => {
console.log(itemName.current.value);
handleClose();
};
return (
<>
<a href="#" className="nav-link" onClick={handleShow}>
Add Product
</a>
<Modal show={show} onHide={handleClose}>
<Modal.Header>
<Modal.Title>Create Item</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form.Group controlId="itemName">
<Form.Label>Item Name</Form.Label>
<Form.Control type="text" name="name" ref={itemName} />
</Form.Group>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={createProduct}>
Create
</Button>
</Modal.Footer>
</Modal>
</>
);
};
On button click i was trying to open a model (and modal opening too) and in a same modal it contain a button and on button click i was trying to open another model (and second modal opening too), but when second modal is opening i want first model to be closed. can it be possible?
Here is my sandbox demo https://codesandbox.io/embed/dreamy-herschel-cyetn?fontsize=14&hidenavigation=1&theme=dark
const Practice = () => {
const [modalShow, setModalShow] = useState(false);
const handleSubmit = event => {
setModalShow(true);
};
return (
<div>
<Button onSubmit={handleSubmit} type="submit">
Submit
</Button>
<Modals show={modalShow} onhide={() => setModalShow(false)} />
</div>
);
};
here is my modal part
const Modals = ({ show, onhide }) => {
const [modalShowsec, setModalShowsec] = useState(false);
const Validation = () => {
setModalShowsec(true);
};
return (
<div>
<Modal show={show} onHide={onhide} size="sm" aria-labelledby="contained-modal-title-vcenter" centered>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">HELLO</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Hi</p>
</Modal.Body>
</Modal>
<button onClick={Validation}> Validate </button>
<Modal show={modalShowsec} onHide={() => setModalShowsec(false)}>
<Modal.Header closeButton />
<Modal.Body>
<p>Hi cool</p>
</Modal.Body>
</Modal>
</div>
);
};
Call onhide inside Validation function. This will hide the first modal.
const Validation = () => {
setModalShowsec(true)
onhide()
}
How to add React-bootstrap Modal when website open for the every time, model should always pop up in center with the details and with option of close the model.
I tried this approach but it fails:
const Modals = (props) => {
const [modalShow, setModalShow] = useState(true);
const handleClose = () => setModalShow(false);
return (
<div>
<Modal
show={modalShow}
onHide={handleClose}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Public Notice
</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>
Dear Friends and Mandir Devotees.
</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={handleClose}>Close</Button>
</Modal.Footer>
</Modal>
</div>
);
};
export default Modals;
In your Modals.js
const Modals = (props) => {
const [modalShow, setModalShow] = useState(true);
const handleClose = () => setModalShow(false);
return (
<div>
<Modal
show={modalShow}
onHide={handleClose}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Public Notice
</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>
Dear Friends and Mandir Devotees.
</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={handleClose}>Close</Button>
</Modal.Footer>
</Modal>
</div>
);
};
export default Modals;
Use Modals.js in your App.js
render(){
<Modals />
}
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