Skip to content

Instantly share code, notes, and snippets.

@duggiemitchell
Created October 26, 2017 14:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save duggiemitchell/3c03ee755d6d82537de68063c5368ab2 to your computer and use it in GitHub Desktop.
Save duggiemitchell/3c03ee755d6d82537de68063c5368ab2 to your computer and use it in GitHub Desktop.
Example Counter Component in React
class Button extends React.Component {
handleClick = () => {
this.props.onClickFn(this.props.incrementValue)
}
render() {
return (
<button onClick={this.handleClick}>
+{this.props.incrementValue}
</button>
)
}
}
const Result = (props) => {
return (
<div>{props.counter}</div>
)
}
class App extends React.Component {
state = {counter: 0}
incrementCounter = (incrementValue) => {
this.setState((prevState) => ({
counter: this.state.counter + incrementValue
}));
}
render() {
return (
<div>
<Button onClickFn={this.incrementCounter} incrementValue={1}/>
<Button onClickFn={this.incrementCounter} incrementValue={5}/>
<Button onClickFn={this.incrementCounter} incrementValue={10}/>
<Button onClickFn={this.incrementCounter} incrementValue={100}/>
<Result counter={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