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.
Related
<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.
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!
I use the standard 'useState' for closing Modal. As long as the form does not transmit information, everything works. But when on pressing the 'submit' button I pass the function for execution, the function is executed, and stops closing the modal window. My button's cod: onClick= {(e) => Auth.handle_login(e, state)}.
My code:
<Modal show={show} **onHide={handleClose}**>
<Modal.Header closeButton>
<Modal.Title> Вход </Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group controlId='fromBasicEmail'>
<Form.Label> Email </Form.Label>
<Form.Control type='email' placeholder='Введите Email' />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Пароль</Form.Label>
<Form.Control type='password' placeholder='Введите пароль' />
</Form.Group>
<Form.Group controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Запомнить меня"/>
</Form.Group>
<Button variant="primary" type="submit" className='mb-5' size="lg" block
/*onClick={(e) => {e.preventDefault(); alert('32')}}*/
//onClick= {(e) => {Auth.handle_login(e, state); setModalStatus(false)}}
**onClick= {(e) => Auth.handle_login(e, state)}**
>Войти</Button>
<Form.Text className='text-muted'>
Ещё нет аккаунта? Зарегистрируйтесь
</Form.Text>
</Form>
</Modal.Body>
I have a grid with 4 buttons, it buttons open different modal
how I separate modal from different file and import
ex: modal client, modal followup, modal calendar
In my grid button, I call different modal
want in a different file because I can use in different grid
grid button
import Client from './clientModal';
import Followup from './followup';
import Calendar from './calendar';
modal form
import {
Button,
ModalBody,
ModalFooter,
ModalHeader,
Col,
Form,
FormGroup,
Input,
Label
} from "reactstrap";
const ModalClients = props => {
this.props = {
modalClient: false,
firstName: null
};
return (
<Form
method="POST"
onChange={this.handleChange}
onSubmit={this.onCreate}
encType="multipart/form-data"
>
<ModalHeader toggleModal={this.toggleClient} className="blue-header">
<i className="cui-people"></i>Clients
</ModalHeader>
<ModalBody>
<FormGroup row className="my-0">
<Col xs="8">
<FormGroup>
<Label htmlFor="firstName">First Name</Label>
<Input
onChange={this.handleChange}
name="firstName"
type="text"
id="firstName"
value={this.props.firstName || ""}
placeholder="Enter First Name"
/>
</FormGroup>
</ModalBody>
<ModalFooter>
<Button color="primary" type="submit" onClick={this.toggleClient}>
<i className="cis-check-double-alt"></i> Save
</Button>
<Button
color="secondary"
onClick={() => {
this.toggleClient();
this.resetForm();
}}
>
Cancel
</Button>
</ModalFooter>
</Form>
);
};
export default ModalClients;
file grid with buttons
import ClientModal from './clientModal';
<Modal
isOpen={this.state.info}
toggle={this.toggleInfo}
backdrop="static"
keyboard={false}
className={"modal-lg " + this.props.className}
>
<ClientModal />
</Modal>
buttons
<Row>
<Button className="btn btn-primary" onClick={() => this.toggleInfo(id)}>
<i className="cis-comment-bubble-edit"></i>
</Button>
<Button
className="btn btn-success"
onClick={() => this.toggleClient(id)}
>
</Row>
I want to open bootstrap modal,which is in my function Dashboard, but when i given its state this.state.show it gives me error this is undefined, here i have addd my whole code, can anyone please check my code and tell me why i am getting that error,
export class DashboardComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
show : false,
}
}
}
function Dashboard() {
return (
<section>
<Modal.Dialog show={this.state.show}>
<Modal.Header closeButton>
<Modal.Title>Newsletter</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary">Close</Button>
<Button variant="primary">Save changes</Button>
</Modal.Footer>
</Modal.Dialog>
</section>
}
export default Dashboard;
I think you should do this :
export class DashboardComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
show : false,
}
}
render(){
return (
<section>
<Modal.Dialog show={this.state.show}>
<Modal.Header closeButton>
<Modal.Title>Newsletter</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary">Close</Button>
<Button variant="primary">Save changes</Button>
</Modal.Footer>
</Modal.Dialog>
</section>
}
}
I think you've got your components mixed up. If your plan to create a component called Dashboard, you don't need to nest it inside another Component (DashboardComponent) in order for it to have access to state. The Dashboard can exist as a component by itself.
Employ the useState() hook which is what React has integrated for functional-components so that they have state-like behavior.
Also, it looks like you need to setup the parent Modal and a function that toggles the opened state. See working sandbox: https://codesandbox.io/s/sad-hoover-cp8f2
import React, { useState } from "react";
import { Modal, Form, Button } from "react-bootstrap";
function Dashboard() {
const [show, setShow] = useState(false);
return (
<section>
<button onClick={() => setShow(!show)}>Display modal</button>
<Modal show={show}>
<Modal.Dialog>
<Modal.Header closeButton>
<Modal.Title>Newsletter</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button onClick={() => setShow(!show)} variant="secondary">
Close
</Button>
<Button variant="primary">Save changes</Button>
</Modal.Footer>
</Modal.Dialog>
</Modal>
</section>
);
}