Guest User

Untitled

a guest
Dec 13th, 2018
76
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.58 KB | None | 0 0
  1. import React from "react";
  2.  
  3. class Comment extends React.Component {
  4. constructor(props) {
  5. super(props);
  6.  
  7. // Setup the state data
  8. this.state = {
  9. flagged: false
  10. };
  11.  
  12. // This binding is necessary to make `this` work in the onclick callback
  13. this.handleClick = this.handleClick.bind(this);
  14. }
  15.  
  16. // Event handler for the button
  17. handleClick() {
  18. // When clicked flip between flagged/not flagged
  19. this.setState(prevState => ({
  20. flagged: !prevState.flagged
  21. }));
  22. }
  23.  
  24. // Define what happens when this component gets drawn on the UI
  25. // Note the two instances of conditional rendering { ___ ? ___ : ____ }
  26. render() {
  27. return (
  28. <div className="column is-half is-offset-one-quarter">
  29. <div
  30. className={
  31. this.state.flagged
  32. ? "card notification is-danger"
  33. : "card notification is-primary"
  34. }
  35. >
  36. <div className="card-content">
  37. <div className="media">
  38. <div className="media-content">
  39. <p className="title is-4">{this.props.name}</p>
  40. <p className="subtitle is-6">{this.props.email}</p>
  41. <p className="subtitle">{this.props.body}</p>
  42. <button type="button" onClick={this.handleClick}>
  43. {this.state.flagged
  44. ? "Flag as appropriate"
  45. : "Flag as inappropriate"}
  46. </button>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52. );
  53. }
  54. }
  55.  
  56. // Allow this to be imported by another JS file
  57. export default Comment;
Add Comment
Please, Sign In to add comment