Skip to content

Instantly share code, notes, and snippets.

@nibro7778
Last active February 23, 2019 05:35
Show Gist options
  • Save nibro7778/9098755d24f1f05c168d79a8804c5e1e to your computer and use it in GitHub Desktop.
Save nibro7778/9098755d24f1f05c168d79a8804c5e1e to your computer and use it in GitHub Desktop.
Sample React class and function component example which increment value on button click
class Button extends React.Component {
render() {
return (
<button onClick={() => this.props.onClickFunction(this.props.incrementValue)}>
+{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: prevState.counter + incrementValue
}));
}
render() {
return (
<div>
<Button incrementValue={1} onClickFunction={this.incrementCounter} />
<Button incrementValue={2} onClickFunction={this.incrementCounter} />
<Button incrementValue={3} onClickFunction={this.incrementCounter} />
<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