Skip to content

Instantly share code, notes, and snippets.

@nastanford
Created September 2, 2017 14:57
Show Gist options
  • Save nastanford/614dc929d1caaa714783b6ccf3dc679e to your computer and use it in GitHub Desktop.
Save nastanford/614dc929d1caaa714783b6ccf3dc679e to your computer and use it in GitHub Desktop.
Simple Example React Code used on jsComplete.com
class Button extends React.Component {
handleClick = () => {
this.props.onClickFunction(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: prevState.counter + incrementValue
}));
};
render() {
return (
<div>
<Button incrementValue={1} onClickFunction={this.incrementCounter} />
<Button incrementValue={5} onClickFunction={this.incrementCounter} />
<Button incrementValue={10} onClickFunction={this.incrementCounter} />
<Button incrementValue={100} onClickFunction={this.incrementCounter} />
<Result counter={this.state.counter} />
</div>
);
}
}
ReactDOM.render(<App />, mountNode);
@gruckion
Copy link

gruckion commented Jul 8, 2018

Thank you found this very helpful (the pluralsight video)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment