I'm using react bootstrap modal in my component but it does not open by onClick event call in another...
I'm using react bootstrap modal in my component, but it does not open by onClick event call in another component. how to resolve this problem?
this is my code
import React, { Component } from 'react';
import classes from '../../Custom.css';
import {Button} from 'reactstrap';
//import ModalCart from '../../ModalCart';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
//import 'react-bootstrap';
class Navi extends Component {`enter code here`
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render() {
return (
<header>
<div className="navbar fixed-top navbar-dark bg-primary box-shadow">
<div className="container d-flex justify-content-between">
<a href="" className="navbar-brand d-flex align-items-center">
<strong><i className="fas fa-tags"></i> Products</strong>
</a>
<Button color="danger" onClick={this.toggle} className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader"
aria-expanded="false" aria-label="Toggle navigation">
<span className="glyphicon glyphicon-shopping-cart" data-toggle="modal" data-target="#exampleModal">
<i className="fas fa-shopping-cart"></i>
<span className={classes.counter}>
Bag : {this.props.noItems} </span>
<span className={classes.counter}>
SUBTOTAL : <span>$</span> {this.props.total.toFixed(2)}
</span>
</span>
{this.props.buttonLabel}</Button>
</div>
</div>
</header>
);
}
}
export default Navi;
this is second component where to call toggle button and my modal exit there-----
import React, { Component } from 'react';
import ShoppingCart from './ShoppingCart';
import classes from '../src/Custom.css';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
//import Aux from '../src/Aux';
class ModalCart extends Component {
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render() {
console.log(this.props.cart);
return (
<div>
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle} className={classes.modalheader}>Shopping Cart</ModalHeader>
<ModalBody className="">
<div className="modal-body">
<ShoppingCart
cart={this.props.cart}
onRemove={this.props.onRemove}
checkOut={this.props.checkOut}
tot={this.props.total}
/>
</div>
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
export default ModalCart;
Both of the component are displayed here plz check and help it out why it does not working thanks .......it is a mind stuck procedure form help me out from this condition,
I'm using react bootstrap modal in my component but it does not open by onClick event call in another component...
can any body knows about it plz mention hem/ her their for help me out from this problem
all two components and their code i place here if i'm done any mistake highlight it resolve this issue
javascript reactjs
add a comment |
I'm using react bootstrap modal in my component, but it does not open by onClick event call in another component. how to resolve this problem?
this is my code
import React, { Component } from 'react';
import classes from '../../Custom.css';
import {Button} from 'reactstrap';
//import ModalCart from '../../ModalCart';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
//import 'react-bootstrap';
class Navi extends Component {`enter code here`
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render() {
return (
<header>
<div className="navbar fixed-top navbar-dark bg-primary box-shadow">
<div className="container d-flex justify-content-between">
<a href="" className="navbar-brand d-flex align-items-center">
<strong><i className="fas fa-tags"></i> Products</strong>
</a>
<Button color="danger" onClick={this.toggle} className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader"
aria-expanded="false" aria-label="Toggle navigation">
<span className="glyphicon glyphicon-shopping-cart" data-toggle="modal" data-target="#exampleModal">
<i className="fas fa-shopping-cart"></i>
<span className={classes.counter}>
Bag : {this.props.noItems} </span>
<span className={classes.counter}>
SUBTOTAL : <span>$</span> {this.props.total.toFixed(2)}
</span>
</span>
{this.props.buttonLabel}</Button>
</div>
</div>
</header>
);
}
}
export default Navi;
this is second component where to call toggle button and my modal exit there-----
import React, { Component } from 'react';
import ShoppingCart from './ShoppingCart';
import classes from '../src/Custom.css';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
//import Aux from '../src/Aux';
class ModalCart extends Component {
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render() {
console.log(this.props.cart);
return (
<div>
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle} className={classes.modalheader}>Shopping Cart</ModalHeader>
<ModalBody className="">
<div className="modal-body">
<ShoppingCart
cart={this.props.cart}
onRemove={this.props.onRemove}
checkOut={this.props.checkOut}
tot={this.props.total}
/>
</div>
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
export default ModalCart;
Both of the component are displayed here plz check and help it out why it does not working thanks .......it is a mind stuck procedure form help me out from this condition,
I'm using react bootstrap modal in my component but it does not open by onClick event call in another component...
can any body knows about it plz mention hem/ her their for help me out from this problem
all two components and their code i place here if i'm done any mistake highlight it resolve this issue
javascript reactjs
add a comment |
I'm using react bootstrap modal in my component, but it does not open by onClick event call in another component. how to resolve this problem?
this is my code
import React, { Component } from 'react';
import classes from '../../Custom.css';
import {Button} from 'reactstrap';
//import ModalCart from '../../ModalCart';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
//import 'react-bootstrap';
class Navi extends Component {`enter code here`
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render() {
return (
<header>
<div className="navbar fixed-top navbar-dark bg-primary box-shadow">
<div className="container d-flex justify-content-between">
<a href="" className="navbar-brand d-flex align-items-center">
<strong><i className="fas fa-tags"></i> Products</strong>
</a>
<Button color="danger" onClick={this.toggle} className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader"
aria-expanded="false" aria-label="Toggle navigation">
<span className="glyphicon glyphicon-shopping-cart" data-toggle="modal" data-target="#exampleModal">
<i className="fas fa-shopping-cart"></i>
<span className={classes.counter}>
Bag : {this.props.noItems} </span>
<span className={classes.counter}>
SUBTOTAL : <span>$</span> {this.props.total.toFixed(2)}
</span>
</span>
{this.props.buttonLabel}</Button>
</div>
</div>
</header>
);
}
}
export default Navi;
this is second component where to call toggle button and my modal exit there-----
import React, { Component } from 'react';
import ShoppingCart from './ShoppingCart';
import classes from '../src/Custom.css';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
//import Aux from '../src/Aux';
class ModalCart extends Component {
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render() {
console.log(this.props.cart);
return (
<div>
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle} className={classes.modalheader}>Shopping Cart</ModalHeader>
<ModalBody className="">
<div className="modal-body">
<ShoppingCart
cart={this.props.cart}
onRemove={this.props.onRemove}
checkOut={this.props.checkOut}
tot={this.props.total}
/>
</div>
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
export default ModalCart;
Both of the component are displayed here plz check and help it out why it does not working thanks .......it is a mind stuck procedure form help me out from this condition,
I'm using react bootstrap modal in my component but it does not open by onClick event call in another component...
can any body knows about it plz mention hem/ her their for help me out from this problem
all two components and their code i place here if i'm done any mistake highlight it resolve this issue
javascript reactjs
I'm using react bootstrap modal in my component, but it does not open by onClick event call in another component. how to resolve this problem?
this is my code
import React, { Component } from 'react';
import classes from '../../Custom.css';
import {Button} from 'reactstrap';
//import ModalCart from '../../ModalCart';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
//import 'react-bootstrap';
class Navi extends Component {`enter code here`
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render() {
return (
<header>
<div className="navbar fixed-top navbar-dark bg-primary box-shadow">
<div className="container d-flex justify-content-between">
<a href="" className="navbar-brand d-flex align-items-center">
<strong><i className="fas fa-tags"></i> Products</strong>
</a>
<Button color="danger" onClick={this.toggle} className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader"
aria-expanded="false" aria-label="Toggle navigation">
<span className="glyphicon glyphicon-shopping-cart" data-toggle="modal" data-target="#exampleModal">
<i className="fas fa-shopping-cart"></i>
<span className={classes.counter}>
Bag : {this.props.noItems} </span>
<span className={classes.counter}>
SUBTOTAL : <span>$</span> {this.props.total.toFixed(2)}
</span>
</span>
{this.props.buttonLabel}</Button>
</div>
</div>
</header>
);
}
}
export default Navi;
this is second component where to call toggle button and my modal exit there-----
import React, { Component } from 'react';
import ShoppingCart from './ShoppingCart';
import classes from '../src/Custom.css';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
//import Aux from '../src/Aux';
class ModalCart extends Component {
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render() {
console.log(this.props.cart);
return (
<div>
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle} className={classes.modalheader}>Shopping Cart</ModalHeader>
<ModalBody className="">
<div className="modal-body">
<ShoppingCart
cart={this.props.cart}
onRemove={this.props.onRemove}
checkOut={this.props.checkOut}
tot={this.props.total}
/>
</div>
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
export default ModalCart;
Both of the component are displayed here plz check and help it out why it does not working thanks .......it is a mind stuck procedure form help me out from this condition,
I'm using react bootstrap modal in my component but it does not open by onClick event call in another component...
can any body knows about it plz mention hem/ her their for help me out from this problem
all two components and their code i place here if i'm done any mistake highlight it resolve this issue
javascript reactjs
javascript reactjs
edited Jan 1 at 6:52
Fazal Khan
asked Dec 31 '18 at 19:39


Fazal KhanFazal Khan
13
13
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
It looks like you are not importing NavbarToggler.
import { NavbarToggler} from reactstrap;
in render() it will look like this
<NavbarToggler onClick={this.toggle} />
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53990903%2fim-using-react-bootstrap-modal-in-my-component-but-it-does-not-open-by-onclick%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
It looks like you are not importing NavbarToggler.
import { NavbarToggler} from reactstrap;
in render() it will look like this
<NavbarToggler onClick={this.toggle} />
add a comment |
It looks like you are not importing NavbarToggler.
import { NavbarToggler} from reactstrap;
in render() it will look like this
<NavbarToggler onClick={this.toggle} />
add a comment |
It looks like you are not importing NavbarToggler.
import { NavbarToggler} from reactstrap;
in render() it will look like this
<NavbarToggler onClick={this.toggle} />
It looks like you are not importing NavbarToggler.
import { NavbarToggler} from reactstrap;
in render() it will look like this
<NavbarToggler onClick={this.toggle} />
answered Dec 31 '18 at 19:47
Maya DavisMaya Davis
5318
5318
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53990903%2fim-using-react-bootstrap-modal-in-my-component-but-it-does-not-open-by-onclick%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown