Skip to content

Instantly share code, notes, and snippets.

@Anirudhk94
Last active January 11, 2019 21:49
Show Gist options
  • Save Anirudhk94/38c8160babab5d508f04e9ac247f094e to your computer and use it in GitHub Desktop.
Save Anirudhk94/38c8160babab5d508f04e9ac247f094e to your computer and use it in GitHub Desktop.
//https://jscomplete.com/playground/xs204018
class Button extends React.Component {
handleInc = () => {
this.props.onClickFunction(this.props.incValue)
}
render() {
return(
<button onClick={this.handleInc}>
+{this.props.incValue}
</button>
)
}
}
class Text extends React.Component {
render() {
return(
<div>
{this.props.display}
</div>
)
}
}
class App extends React.Component {
state = {counter : 0};
incrementCounter = (incValue) => {
this.setState((prevState) => {
return {
counter: prevState.counter + incValue
}
})
}
render() {
return(
<div>
<Button incValue={1} onClickFunction = {this.incrementCounter}/>
<Button incValue={5} onClickFunction = {this.incrementCounter}/>
<Button incValue={10} onClickFunction = {this.incrementCounter}/>
<Button incValue={50} onClickFunction = {this.incrementCounter}/>
<Button incValue={100} onClickFunction = {this.incrementCounter}/>
<Text display = {this.state.counter}/>
</div>
)
}
}
ReactDOM.render(<App />, mountNode)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment