Im following this tutorial on bootstrap modal for react. This is the code i have:
import React, { Component } from 'react';
import { Modal } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import { Popover } from 'react-bootstrap';
import { OverlayTrigger } from 'react-bootstrap';
import { Tooltip } from 'react-bootstrap';
class Login extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
show: false
};
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
}
handleClose() {
this.setState({ show: false });
}
handleShow() {
console.log("Show")
this.setState({ show: true });
}
render() {
const popover = (
<Popover id="modal-popover" title="popover">
very popover. such engagement
</Popover>
);
const tooltip = <Tooltip id="modal-tooltip">wow.</Tooltip>;
return (
<div>
<p>Click to get the full Modal experience!</p>
<Button bsStyle="primary" bsSize="large" onClick={this.handleShow}>
Launch demo modal
</Button>
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Text in a modal</h4>
<p>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
</p>
<h4>Popover in a modal</h4>
<p>
there is a{' '}
<OverlayTrigger overlay={popover}>
popover
</OverlayTrigger>{' '}
here
</p>
<h4>Tooltips in a modal</h4>
<p>
there is a{' '}
<OverlayTrigger overlay={tooltip}>
tooltip
</OverlayTrigger>{' '}
here
</p>
<hr />
<h4>Overflowing text to show scroll behavior</h4>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.handleClose}>Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}
}
export default Login;
My issue is that when i click on the "Launch demo modal" - button the modal is not shown. I checked to see in the console if the boolean value for "show" is set to true when clicking which it is but somehow the modal is not shown anyway.
This is the entry-point for the application:
import Login from './Components/Modal/Login';
class App extends Component {
render() {
return (
<div className="App">
<Login/>
</div>
);
}
}
export default App;
I have tried to figure it out for hours now but i have no idea. I even used the exact same code as the tutorial at one point but with no luck. Any help is appretiated.
You forgot to add style.css files. add below links to your index.html file .
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
EDIT 1:
or without CDN (on your index.html)
import 'bootstrap/dist/css/bootstrap.css';
It may be useful to take a look at Conditional Rendering With React
:-)
render () {
return (
<div>
{this.state.show ? /*Your component*/ : null /*Or another component*/}
</div>
)
}
side note : Taking this approach means that your Modal component is not instantiated in the first place is this.state.show is false which could be beneficial application speed.
If you pass a show prop into your Modal this implies the Modal is being instantiated and some un needed logic is being applied whithin.
You can show modal using && operator with state like below. I have removed show prop to modal. Try below approach it will work
{this.state.show && (
<Modal onHide={this.handleClose}>
...... // place remaining code here
</Modal>
)}
Related
I am using React.js but I don't achieve to switch modal. Here is my code :
import React from "react";
import ReactDOM from "react-dom";
import moment from "moment";
import { Modal, version, Button } from "antd";
import "antd/dist/antd.css";
import { BrowserRouter, Link, Redirect, Route, Switch } from "react-router-dom";
import Clickthere from "Clickthere";
class App extends React.Component {
state = { visible: false };
showModal = () => {
this.setState({
visible: true
});
};
handleOk = (e) => {
console.log(e);
this.setState({
visible: false
});
};
handleCancel = (e) => {
console.log(e);
this.setState({
visible: false
});
};
render() {
return (
(
<div>
<Button type="primary" onClick={this.showModal}>
Open
</Button>
<Modal
title="Basic Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<p style={{ textAlign: "center" }}>
Other thing?{" "}
<BrowserRouter>
<Link to="/clickthere">
<i className="fas fa-user-plus" /> Click there
</Link>
</BrowserRouter>
</p>
</Modal>
</div>
),
(
<BrowserRouter>
<Switch>
<Route path="/clickthere" component={Clickthere} />
</Switch>
</BrowserRouter>
)
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
I achieve to open the first modal but I don't achieve when I click on "Click there" nothing happen...
Here is the code of the component Clickthere :
import { Modal } from "react-bootstrap";
import React from "react";
import { BrowserRouter, Switch } from "react-router-dom";
const Clickthere = (props) => {
console.log(props);
return (
<>
<Modal>
<div>
<p>This is a test.</p>
</div>
</Modal>
<BrowserRouter>
<Switch></Switch>
</BrowserRouter>
</>
);
};
export default Clickthere;
Do you know why it does not work ?
Thank you very much !
Here is my code : My code
I'm trying to add a antd modal with drag&drop features.
import React, { Component } from "react";
import Draggable from "react-draggable";
import { Modal } from 'antd';
import 'antd/dist/antd.css';
export default class App extends Component {
state = {
disabled: false
};
render = () => {
const { disabled } = this.state;
return (
<div className="container">
<Modal visible>
<Draggable>
<div>
<h4 style={{ height: 20, userSelect: "none" }}>
{"Drag Me"}
</h4>
<textarea disabled={!disabled} className="uk-textarea" />
<br />
</div>
</Draggable>
</Modal>
</div>
);
};
}
Here's my sanbox code https://codesandbox.io/s/small-currying-j3emq, but it seems that react-draggable in ant modal element doesn't work, probably if I can set the element "ant-modal-content" as draggable element this works.
Does anyone know if it is possible to put the draggable element via props in react-draggable?
I am also available to change the package for drag & drop, I just need to be able to drag a antd modal
Just place your <Draggable> inside your <Modal> and not the opposite
return (
<div className="container">
<Modal visible>
<Draggable>
<div>
<h4 style={{ height: 20, userSelect: "none" }}>{"Drag Me"}</h4>
<textarea disabled={!disabled} className="uk-textarea" />
<br />
</div>
</Draggable>
</Modal>
</div>
);
I have a exercise I am working on/attempting to replicate and I am trying to add a modal button to the file. I have the button and the modal from React Bootstrap, however, I am unable to get the actual modal to show up. I was using the documentation from React-Bootstrap but getting the actual modal to come up is not working, I have tried to import the various modals but to no avail, am I missing something in my code?
import React from 'react';
import { Modal, Form, FormControl, Button, ButtonToolbar, InputGroup } from 'react-bootstrap';
import { connect } from 'react-redux';
import { addItem } from '../actions/itemActions';
function ItemModal(props) {
return (
<div>
<Button
variant="dark"
style={{marginBottom: '2em'}}
>Add Item
</Button>
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Add to Shopping List
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Label for="item">Item</Form.Label>
<InputGroup className="mb-3">
<FormControl
type="text"
name="name"
id="item"
aria-label="Add Shopping Item"
aria-describedby="basic-addon2"
/>
<InputGroup.Append>
<Button onClick={props.onHide} variant="outline-dark">Add</Button>
</InputGroup.Append>
</InputGroup>
</Form>
</Modal.Body>
</Modal>
</div>
);
}
function App() {
const [modalShow, setModalShow] = React.useState(false);
return (
<ButtonToolbar>
<Button variant="dark" onClick={() => setModalShow(true)}>
Add Item
</Button>
<ItemModal
show={modalShow}
onHide={() => setModalShow(false)}
/>
</ButtonToolbar>
);
}
export default connect()(ItemModal);
I do have this extra bit of code that I though would function to open the modal but I don't think it works with this version of Bootstrap?
state = {
modal: false,
name: ''
}
toggle = () => {
this.setState({
modal: !this.state.modal
});
};
onChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
}
From your code snippet, I found an issue.
You have 2 component's in a single file, App and ItemModal. From which App component is your base / parent component and ItemModal is your child component.
But you are exporting child compoennt,
export default connect()(ItemModal);
You should export the parent component,
export default connect()(App);
Im using react js Pagination component and wrote the code as mentioned in documentation but it does nothing onClick.
import Pagination from "react-js-pagination"
and here i use it:
{this.state.spareParts.map((part, index) =>
<Col md="3" lg="3" sm="6" xs="6" xl="3">
<Card>
<h4>
<b> {part.Name} </b>
</h4>
<h4> Rs. {part.Price} </h4>
<h5> By: {part.CompanyName} </h5>
</Card>
</Col>
)}
<Pagination
data={this.state.spareParts}
activePage={this.state.activePage}
itemsCountPerPage={10}
totalItemsCount={50}
pageRangeDisplayed={5}
onChange={this.handlePageChange} />
and here is handlePageChange function:
handlePageChange(pageNumber)
{
console.log(`active page is ${pageNumber}`);
this.setState({activePage: pageNumber});
}
Can someone tell me what Im doing wrong here becoz of which Im getting no results on click on pagination bar.
It's working for me. Can you try below code.
Why do you need to send data(spareParts) as the component doesn't take data as prop.
import React, { Component } from "react";
import ReactDOM from "react-dom";
import Pagination from "react-js-pagination";
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
activePage: 15
};
}
handlePageChange(pageNumber) {
console.log(`active page is ${pageNumber}`);
this.setState({activePage: pageNumber});
}
render() {
return (
<div>
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={10}
totalItemsCount={450}
pageRangeDisplayed={5}
onChange={this.handlePageChange}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
Happy Coding!!!
For someone who looking for solutions in 2022
// Try to add event.stopPropagation();
<a className={`page-link ${page == props.currentPage ? 'isDisabled-link' : ''}`} href="#"
onClick={(event) => { event.stopPropagation(); props.pageChanged(page) }}
>
{page}
</a>
During the development of my next React app, I had to use a modal component from react-bootstrap. It's actually working fine, but it looks like there are no stylesheets imported?
Here is my code
import React from "react";
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
class Nav extends React.Component {
constructor(props, context) {
super(props, context);
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
this.state = {
show: false,
};
}
handleClose() {
this.setState({ show: false });
}
handleShow() {
this.setState({ show: true });
}
render() {
return (
<>
<nav>
<h5>a pack of free css animations</h5>
<ul>
<li><button variant="primary" onClick={this.handleShow}>how to use ></button></li>
<li>
<form method="get" action="file">
<button type="submit">download ></button>
</form>
</li>
<li>see on github ></li>
</ul>
</nav>
<Modal
show={this.state.show}
onHide={this.handleClose}
aria-labelledby="ModalHeader"
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">How to use?</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Once you downloaded <i>animation.min.css</i>, you have to link that to your project.<br />
To do that, use a 'link' tag, or just copy code of animation you like.</p>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
</>
);
}
}
export default Nav;
And it looks like that (Chrome)
Click me
Modal is displayed on bottom, text is not centered etc...
What do you think?
How to improve that?
Load the style from react-bootstrap, like below:
https://react-bootstrap.github.io/getting-started/introduction/
You are missing the stylesheet from react-bootstrap which is why the model is not getting styled properly. Add following to your html and it should work.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"
/>
Please go through the link to integrate your app and use with react-bootstrap.