<Modal
show={state.adminModals['email']}
onHide={closeModal}
backdrop="static"
keyboard="false">
<Modal.Header closeButton>
<Modal.Title>Brands</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form.Group className="mb-3">
<Form.Select>
{ brandsData.map( brand => (
<option>{brand.label}</option>
))}
</Form.Select>
</Form.Group>
</Modal.Body>
<Modal.Footer>
<Button variant="primary" onClick={??}>
Go
</Button>
</Modal.Footer>
</Modal>
I have a react modal window in which users are able to select the options, I want users to be able to go to the page which is a table with one row and display the email information.
Related
I want to add a spinner to my modal that I am currently on.
<Modal show={modal.show} onHide={onHideModal}>
<form onSubmit={onImport}>
<Modal.Header closeButton>
<Modal.Title>View Details</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form.Group controlId="csvFile" className="mb-3">
<Form.Label>Import CSV</Form.Label>
<Form.Control type="file" accept='.csv, .xls, .xlsx' required className="primary mb-3" name="" onChange={onChangeImportFile} ref={inputFileRef} />
<Button variant="primary" className="me-2" type="submit" disabled={saving===true ? false : true}>Upload</Button>
</Form.Group>
<Form.Group className="mb-2">
<Form.Label>Message</Form.Label>
<Form.Control as="textarea" readOnly value={fileError} rows={5} />
</Form.Group>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={clearModal}>
Clear
</Button>
<Button variant="secondary" onClick={onHideModal} className="me-auto">
Close
</Button>
</Modal.Footer>
</form>
</Modal>
I want to click submit and it will show the spinner if the data is big. As of right now it looks like it broke but after a while all the data gets sent through.
I tried adding this inside but I am not really sure how to set it up to show the loading when I click the submit button.
<Spinner animation="border" role="status" variant="primary">
<span className="visually-hidden">Loading...</span>
</Spinner>
Try using useState variable to change the occurence of spinner
Like, when u click on the submit btn the spinner should show up.
I am using Modal from react-bootstrap in my React application, but I am unable to test the Modal.
Is there a way to test Modal using React Testing Library, without enzyme?
Here's my component
<Modal
show={show}
onHide={() => handleClose()}
className="ad-adduser-modal"
backdrop="static"
centered
>
<Modal.Header closeButton>
<Modal.Title className="headline4">Login</Modal.Title>
</Modal.Header>
<Modal.Body>
<input
type="text"
placeholder="Username"
onChange={(e) => {
this.setState({username: e.target.value})
}}
value={username}
/>
<input
type="password"
placeholder="Password"
onChange={(e) => {
this.setState({password: e.target.value})
}}
value={password}
/>
</Modal.Body>
<Modal.Footer>
<Button
onClick={() => login()}
>
Login
</Button>
</Modal.Footer>
</Modal>
Thanks in advance!
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
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 />
}
I find plenty of resources for this problem for class components, but how do I get the values of bootstraps FormControls inside a functional component like this? I never used refs before, so I am not quite sure, how to approach this task inside of a functional component.
import React from "react";
import { Modal, Button, Form, Col, Row } from "react-bootstrap";
import Button from "../button/Button";
export default function NewEventModal(props) {
const onSubmit = (e) => {
e.preventDefault();
console.log(e.target.elements) /*How to get name value?*/
};
return (
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Form onSubmit={(e) => onSubmit(e)}>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Create Event
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form.Group controlId="formGridName">
<Form.Label>Eventname</Form.Label>
<Form.Control type="text" placeholder="Input the eventname" inputRef={(ref) => { this.name = ref }}/>
</Form.Group>
</Modal.Body>
<Modal.Footer>
<Button type="submit" text="Erstellen" />
<Button onClick={props.onHide} text="Close"/>
</Modal.Footer>
</Form>
</Modal>
);
}