SHARE
TWEET

Untitled

a guest Aug 13th, 2017 46 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react'
  2. import ReactDOM from 'react-dom'
  3.  
  4. class Button extends React.Component{
  5.  
  6.     handleClick = () => {
  7.         this.props.incrementCounter(this.props.incrementable)
  8.     }
  9.  
  10.     render(){
  11.         return(
  12.             <button onClick={this.handleClick}>+{this.props.incrementable}</button>
  13.         )
  14.     }
  15. }
  16.  
  17. const Results = (props) => {
  18.     return (
  19.         <div>
  20.             Result is: {props.counter}
  21.         </div>
  22.     )
  23. }
  24.  
  25. class App extends React.Component{
  26.  
  27.     state = {
  28.         counter: 1
  29.     }
  30.  
  31.     incrementCounter = (incrementable) => {
  32.         this.setState((prevState) => {
  33.             return {
  34.                 counter: prevState.counter + incrementable
  35.             }
  36.         })
  37.     }
  38.  
  39.     render(){
  40.         return (
  41.             <div>
  42.                 <Button incrementCounter={this.incrementCounter} incrementable={1}/>
  43.                 <Button incrementCounter={this.incrementCounter} incrementable={10}/>
  44.                 <Results counter={this.state.counter}/>
  45.             </div>
  46.         )
  47.     }
  48. }
  49.  
  50. ReactDOM.render(<App/>, document.getElementById('app'))
RAW Paste Data
Pastebin PRO Summer Special!
Get 40% OFF on Pastebin PRO accounts!
Top