React Component button to trigger modal in another component (using react-bootstrap)
I have a productCard where the addToCart button is pressed, a shoppingCart modal that pops up once that has happened, and the App Component that renders it all. I'm having a hard time passing the click event from the addToCart button (in the productCard Comp) to trigger the handleShow() method in the (shoppingCart comp). Here's my code:
shoppingCart.js:
import React from "react";
import
Popover,
Tooltip,
Button,
Modal,
OverlayTrigger
from "react-bootstrap";
// import ProductCard from "./productCard.js";
import "./shoppingCart";
export class ShoppingCart extends React.Component
constructor(props)
super(props);
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
this.state =
show: false
;
handleClose()
this.setState( show: false );
//I'm trying to trigger this method from the onClick event in
//productCard.js
handleShow()
this.setState( show: true );
render()
return (
<div>
<Modal show=this.state.show onHide=this.handleClose>
<Modal.Header closeButton>
<Modal.Title>Your Cart</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Current Items: </p>
</Modal.Body>
<Modal.Footer>
<Button onClick=this.handleClose>Continue Shopping</Button>
<Button>Checkout</Button>
</Modal.Footer>
</Modal>
</div>
);
productCard.js
import React from "react";
import Grid, Row, Col, Thumbnail, Button from "react-bootstrap";
import ShoppingCart from "./shoppingCart.js";
import "./productCard.css";
export class ProductCard extends React.Component
constructor(props)
super(props);
render()
return (
<div className="ProductCard">
<Grid className="Grid">
<Row>
<Col xs=12 sm=6 md=3>
<Thumbnail
className="Thumbnail"
src="http://placehold.jp/300x200.png"
alt="300x200"
>
<h3>Product Name</h3>
<p>Description</p>
<p>
<Button bsStyle="primary">Read More</Button>
<Button bsStyle="success" onClick=this.props.handleShow>Add to Cart</Button>
</p>
</Thumbnail>
</Col>
</Row>
</Grid>
</div>
);
I'm sure it's a simple misunderstanding, but I'm having trouble wrapping my head around this and it's held me up for long enough. Thanks for any help!
event-handling
add a comment |
I have a productCard where the addToCart button is pressed, a shoppingCart modal that pops up once that has happened, and the App Component that renders it all. I'm having a hard time passing the click event from the addToCart button (in the productCard Comp) to trigger the handleShow() method in the (shoppingCart comp). Here's my code:
shoppingCart.js:
import React from "react";
import
Popover,
Tooltip,
Button,
Modal,
OverlayTrigger
from "react-bootstrap";
// import ProductCard from "./productCard.js";
import "./shoppingCart";
export class ShoppingCart extends React.Component
constructor(props)
super(props);
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
this.state =
show: false
;
handleClose()
this.setState( show: false );
//I'm trying to trigger this method from the onClick event in
//productCard.js
handleShow()
this.setState( show: true );
render()
return (
<div>
<Modal show=this.state.show onHide=this.handleClose>
<Modal.Header closeButton>
<Modal.Title>Your Cart</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Current Items: </p>
</Modal.Body>
<Modal.Footer>
<Button onClick=this.handleClose>Continue Shopping</Button>
<Button>Checkout</Button>
</Modal.Footer>
</Modal>
</div>
);
productCard.js
import React from "react";
import Grid, Row, Col, Thumbnail, Button from "react-bootstrap";
import ShoppingCart from "./shoppingCart.js";
import "./productCard.css";
export class ProductCard extends React.Component
constructor(props)
super(props);
render()
return (
<div className="ProductCard">
<Grid className="Grid">
<Row>
<Col xs=12 sm=6 md=3>
<Thumbnail
className="Thumbnail"
src="http://placehold.jp/300x200.png"
alt="300x200"
>
<h3>Product Name</h3>
<p>Description</p>
<p>
<Button bsStyle="primary">Read More</Button>
<Button bsStyle="success" onClick=this.props.handleShow>Add to Cart</Button>
</p>
</Thumbnail>
</Col>
</Row>
</Grid>
</div>
);
I'm sure it's a simple misunderstanding, but I'm having trouble wrapping my head around this and it's held me up for long enough. Thanks for any help!
event-handling
add a comment |
I have a productCard where the addToCart button is pressed, a shoppingCart modal that pops up once that has happened, and the App Component that renders it all. I'm having a hard time passing the click event from the addToCart button (in the productCard Comp) to trigger the handleShow() method in the (shoppingCart comp). Here's my code:
shoppingCart.js:
import React from "react";
import
Popover,
Tooltip,
Button,
Modal,
OverlayTrigger
from "react-bootstrap";
// import ProductCard from "./productCard.js";
import "./shoppingCart";
export class ShoppingCart extends React.Component
constructor(props)
super(props);
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
this.state =
show: false
;
handleClose()
this.setState( show: false );
//I'm trying to trigger this method from the onClick event in
//productCard.js
handleShow()
this.setState( show: true );
render()
return (
<div>
<Modal show=this.state.show onHide=this.handleClose>
<Modal.Header closeButton>
<Modal.Title>Your Cart</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Current Items: </p>
</Modal.Body>
<Modal.Footer>
<Button onClick=this.handleClose>Continue Shopping</Button>
<Button>Checkout</Button>
</Modal.Footer>
</Modal>
</div>
);
productCard.js
import React from "react";
import Grid, Row, Col, Thumbnail, Button from "react-bootstrap";
import ShoppingCart from "./shoppingCart.js";
import "./productCard.css";
export class ProductCard extends React.Component
constructor(props)
super(props);
render()
return (
<div className="ProductCard">
<Grid className="Grid">
<Row>
<Col xs=12 sm=6 md=3>
<Thumbnail
className="Thumbnail"
src="http://placehold.jp/300x200.png"
alt="300x200"
>
<h3>Product Name</h3>
<p>Description</p>
<p>
<Button bsStyle="primary">Read More</Button>
<Button bsStyle="success" onClick=this.props.handleShow>Add to Cart</Button>
</p>
</Thumbnail>
</Col>
</Row>
</Grid>
</div>
);
I'm sure it's a simple misunderstanding, but I'm having trouble wrapping my head around this and it's held me up for long enough. Thanks for any help!
event-handling
I have a productCard where the addToCart button is pressed, a shoppingCart modal that pops up once that has happened, and the App Component that renders it all. I'm having a hard time passing the click event from the addToCart button (in the productCard Comp) to trigger the handleShow() method in the (shoppingCart comp). Here's my code:
shoppingCart.js:
import React from "react";
import
Popover,
Tooltip,
Button,
Modal,
OverlayTrigger
from "react-bootstrap";
// import ProductCard from "./productCard.js";
import "./shoppingCart";
export class ShoppingCart extends React.Component
constructor(props)
super(props);
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
this.state =
show: false
;
handleClose()
this.setState( show: false );
//I'm trying to trigger this method from the onClick event in
//productCard.js
handleShow()
this.setState( show: true );
render()
return (
<div>
<Modal show=this.state.show onHide=this.handleClose>
<Modal.Header closeButton>
<Modal.Title>Your Cart</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Current Items: </p>
</Modal.Body>
<Modal.Footer>
<Button onClick=this.handleClose>Continue Shopping</Button>
<Button>Checkout</Button>
</Modal.Footer>
</Modal>
</div>
);
productCard.js
import React from "react";
import Grid, Row, Col, Thumbnail, Button from "react-bootstrap";
import ShoppingCart from "./shoppingCart.js";
import "./productCard.css";
export class ProductCard extends React.Component
constructor(props)
super(props);
render()
return (
<div className="ProductCard">
<Grid className="Grid">
<Row>
<Col xs=12 sm=6 md=3>
<Thumbnail
className="Thumbnail"
src="http://placehold.jp/300x200.png"
alt="300x200"
>
<h3>Product Name</h3>
<p>Description</p>
<p>
<Button bsStyle="primary">Read More</Button>
<Button bsStyle="success" onClick=this.props.handleShow>Add to Cart</Button>
</p>
</Thumbnail>
</Col>
</Row>
</Grid>
</div>
);
I'm sure it's a simple misunderstanding, but I'm having trouble wrapping my head around this and it's held me up for long enough. Thanks for any help!
event-handling
event-handling
asked Nov 12 '18 at 8:10
Daniel HayesDaniel Hayes
61
61
add a comment |
add a comment |
0
active
oldest
votes
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%2f53258064%2freact-component-button-to-trigger-modal-in-another-component-using-react-bootst%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53258064%2freact-component-button-to-trigger-modal-in-another-component-using-react-bootst%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