Guest User

toggle button colors

a guest
Nov 19th, 2019
90
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {Component} from 'react';
  2. import {ProductConsumer} from "../context";
  3. import {Link} from 'react-router-dom';
  4. import {ButtonContainer} from "./Button";
  5.  
  6. export default class Details extends Component {
  7. constructor(props) {
  8. super(props);
  9. this.state = {
  10. white: true,
  11. small: false,
  12. medium: false,
  13. large: false,
  14. xLarge: false,
  15. };
  16. this.sizeClicked = this.sizeClicked.bind(this);
  17. }
  18.  
  19. sizeClicked() {
  20. this.setState({white: !this.state.white});
  21. }
  22.  
  23. render() {
  24. // let color_switch_size = this.state.white ? "white-btn" : "green-btn";
  25. return (
  26. <ProductConsumer>
  27. {value => {
  28. const {id, company, img, info, small, medium, large, xLarge, price, title, inCart} = value.detailProduct;
  29. console.log(value.detailProduct);
  30. return (
  31. <div className="container py-5">
  32. {/* title */}
  33. <div className="row">
  34. <div className="col-10 mx-auto text-center text-slanted text-blue my-5">
  35. <h1>{title}</h1>
  36. </div>
  37. </div>
  38. {/* end title */}
  39. {/* product info */}
  40. <div className="row">
  41. <div className="col-10 mx-auto col-md-6 my-3">
  42. <img src={img} className="img-fluid" alt="product"/>
  43. </div>
  44. {/* product text */}
  45. <div className="col-10 mx-auto col-md-6 my-3 mt-5">
  46. {/*<h2>{title}</h2>*/}
  47. <h1 className="text-title text-uppercase text-muted mt-3 mb-2">
  48. <span className="text-uppercase shirts">
  49. {company}
  50. </span>
  51. </h1>
  52. <h1 className="text-blue">
  53. <strong>
  54. <span>$</span>
  55. {price}
  56. </strong>
  57. </h1>
  58. <button className={`${this.state.white ? "white-btn" : "green-btn"} text-capitalize font-weight-bold mt-3 mb-0 btn btn-light`} onClick={this.sizeClicked}>
  59. {small}
  60. </button>
  61. <button className="text-capitalize font-weight-bold mt-3 mb-0 btn btn-light" onClick={this.sizeClicked}>
  62. {medium}
  63. </button>
  64. <button className="text-capitalize font-weight-bold mt-3 mb-0 btn btn-light" onClick={this.sizeClicked}>
  65. {large}
  66. </button>
  67. <button className="text-capitalize font-weight-bold mt-3 mb-0 btn btn-light" onClick={this.sizeClicked}>
  68. {xLarge}
  69. </button>
  70. {/* buttons */}
  71. <div>
  72. <Link to="/">
  73. <ButtonContainer>back to products
  74. </ButtonContainer>
  75. </Link>
  76. <ButtonContainer
  77. cart
  78. disabled={inCart ? true : false}
  79. onClick={() => {
  80. value.addToCart(id);
  81. value.openModal(id);
  82. }}>
  83. {inCart ? 'inCart' : "add to cart"}
  84. </ButtonContainer>
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. );
  90. }}
  91. </ProductConsumer>
  92. );
  93. }
  94. }
RAW Paste Data