JSFiddle - React, Tailwind, and code Playground

by badfreja

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/cjs/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/cjs/react-dom.development.js"></script>
<div id="container">
</div>

Babel + JSX

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}/>
        <Result counter={this.state.counter}/>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));