The app calculates the tax which is included in a (given) amount. Because I'm new with both libraries (React.js and Foundation) I would appreciate hints and improvement suggestions.Live demo on CodePenvar SelectInput = React.createClass({  changeHandler: function(e) {    this.props.setTaxRate(e.target.value);  },  render: function() {    var options = [];        for (let i = this.props.min; i <= this.props.max; i++) {      options.push(<option value={ i } >{ i }</option>);    }        return (      <div>        <select id=tax-rate ref=taxRate                onChange={ this.changeHandler }                value={ this.props.preSelected }                title={ this.props.title }>          { options }        </select>      </div>    );  }});var TaxCalculator = React.createClass({  DEFAULT_TAX_RATE: 20,  getInitialState: function() {    return {      totalAmount: 0,      nettoAmount: 0,      includedTax: 0,      taxRate: this.DEFAULT_TAX_RATE    }  },  setTaxRate: function(val) {    this.setState( {      taxRate: parseFloat(val)    } );  },  setTotalAmount: function() {    var toCheck = parseFloat(this.refs.totalAmount.value);    if (typeof toCheck === 'number' && toCheck === toCheck) {      this.refs.totalAmount.classList.remove('invalid-value');      this.refs.calculate.removeAttribute('disabled');          this.setState( {        totalAmount: toCheck.toFixed(2)      } );    } else {       this.refs.totalAmount.classList.add('invalid-value');       this.refs.calculate.setAttribute('disabled');       this.forceUpdate();    }  },  calculate: function() {         this.state.includedTax =      (( this.state.totalAmount / (100 + this.state.taxRate) )         * this.state.taxRate).toFixed(2);    this.state.nettoAmount = (this.state.totalAmount - this.state.includedTax).toFixed(2);        this.forceUpdate();    this.refs.totalAmount.setAttribute('disabled', 'disabled');  },  reset: function() {    this.setState( {      totalAmount: 0,      nettoAmount: 0,      includedTax: 0,      taxRate: this.DEFAULT_TAX_RATE    } );    this.refs.totalAmount.value = 0;    this.refs.totalAmount.removeAttribute('disabled');    this.refs.totalAmount.classList.remove('invalid-value');  },  render: function() {       return (      <div className=calculator-form>        <div className=row>          <div className=callout secondary>            <h3>Value-added tax calculator</h3>            <p>Enter the total amount and the tax rate for to get the amount of the contained tax.</p>          </div>        </div>        <div className=row>          <div className=labeled-input medium-12 large-6 columns>            <label for=total-amount>Total amount: </label>            <input type=text id=total-amount required pattern=[0-9]+                   ref=totalAmount onChange={ this.setTotalAmount }                    title=Enter here the total amount.                   placeholder=Please enter the total amount as a number here ... />          </div>          <div className=labeled-input medium-12 large-6 columns>            <label for=Tax-rate>Tax rate: </label>            <SelectInput min=1 max=99               preSelected={ this.state.taxRate }              setTaxRate={ this.setTaxRate }              title=Enter here the tax-rate. />          </div>        </div>                <div className=row buttons>          <div className=button-group expanded>            <a className=button onClick={ this.calculate }               disabled=disabled ref=calculate               title=Calculate the netto amount and included tax based upon the entered                      total amount.>Calculate</a>            <a className=warning button onClick={ this.reset }>Reset</a>          </div>        </div>                <div className=row>              <div className=labeled-input medium-12 large-6 columns>            <label for=included-tax>Included tax: </label>            <input type=text id=included-tax className=read-only                   ref=includedTax                   value={ this.state.includedTax } />          </div>          <div className=labeled-input medium-12 large-6 columns>            <label for=netto-amount>Netto amount: </label>            <input type=text id=netto-amount className=read-only                   ref=nettoAmount value={ this.state.nettoAmount } />          </div>        </div>      </div>    );  }});ReactDOM.render(  <TaxCalculator />,  document.querySelector('#app'));$radius: 8px;#app {  background-color: lighten(grey, 35%);  padding-top: 20px;  border-top: 1px solid black;  border-bottom: 1px solid black;}body {  background-color: lighten(grey, 25%);}.invalid-value {  border: 1px solid crimson;  background-color: lighten(pink, 7%);}.container {  margin-top: 50px;}label, .button {  font-weight: 800;}.buttons {  display: flex;  justify-content: center;}.button-group {  width: calc(100% - 30px);  margin-top: 20px;  margin-bottom: 25px;}.read-only {  pointer-events: none;}.callout {  margin: 0 15px 30px 15px;}.labeled-input input, .callout, .button, .labeled-input select {  border-radius: $radius;}a.button:first-of-type {  padding-right: 0;}a.button:nth-of-type(2) {  padding-left: 0;}.callout p {  font-family: georgia;}<div class=container>  <div id=app></app></div>
Value-added tax calculator app
javascript;css;calculator;react.js;foundation
Well, the first thing I would do, to refactor this component, is creating a bunch of presentational components like:const Row = ({taxRate, setTotalAmount, setTaxRate}) => (  <div className=row>    <div className=labeled-input medium-12 large-6 columns>      <label for=total-amount>Total amount: </label>      <input         type=text        required pattern=[0-9]+        ref=totalAmount onChange={ setTotalAmount }         title=Enter here the total amount.        placeholder=Please enter the total amount as a number here ... />    </div>    <div className=labeled-input medium-12 large-6 columns>       <label for=Tax-rate>Tax rate: </label>       <SelectInput         min=1 max=99          preSelected={ taxRate }         setTaxRate={ setTaxRate }         title=Enter here the tax-rate. />    </div>  </div>)So, splitting it up will make them more reusable, and make your code look simpler.This syntax is supported since React 0.14..The next thing is, don't modify your refs like this:this.refs.totalAmount.value = 0;this.refs.totalAmount.removeAttribute('disabled');this.refs.totalAmount.classList.remove('invalid-value');this is an Anti-pattern in React, your are degrading React to jQuery. Remember the shit flows always in one direction, so use setState or better Redux to control your data flow, and props in your representational components..So, no refs modification!!!, react on every data change, by using setState or redux-actions. Split your application in presentational components and container components.