JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<div id="app"></div>

React

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {input1: 4, input2: 2.50};
    
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange (name, e) {
    var change = {};
    change[name] = e.target.value;
    this.setState(change);
  }

  render() {
		const input1 = this.state.input1;
    const input2 = this.state.input2;     
    
    const add = parseInt(input1) + parseInt(input2);     
    const mul = input1 * input2;
    const min = input1 - input2;

    return (
      <div>
        <p>{input1} + {input2} = {add}</p>
        <p>{input1} - {input2} = {min.toFixed(2)}</p>
        <p>{input1} * {input2} = {mul.toFixed(2)}</p>
        <p><input type="text" value={input1.toFixed(2)} onChange={this.handleChange.bind(this, 'input1')} /></p>
        <p><input type="text" value={input2.toFixed(2)} onChange={this.handleChange.bind(this, 'input2')} /></p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));