JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
<section class="app"></section>
Babel + JSX
class Example extends React.Component {
constructor(props) {
super(props);
this.state = { progress: "0", score: 0};
this.handleClick = this.handleClick.bind(this);
this.scoreUpdate = this.scoreUpdate.bind(this);
}
handleClick(e) {
let previous = this.state.progress;
let score = Number(e.currentTarget.id);
this.setState({progress: previous+e.currentTarget.id});
this.scoreUpdate(score);
}
scoreUpdate(score) {
console.log(this.state.progress);
if (this.state.progress.length % 3 == 0) {
let previous = this.state.score;
this.setState({score: previous+score});
}
}
render() {
return (
<button onClick={this.handleClick} id="1">
{this.state.score}: Click Me...
</button>
);
}
}
ReactDOM.render(<Example />, document.querySelector('section.app'));