Building Enterprise JavaScript Applications

Rendering the state

Lastly, in our render method, let's add an indicator component. We will read from the state of the component to determine the color of our indicator.

<script type="text/babel">  ...  function getIndicatorColor (state) {    if (state.valid === null || state.value.length === 0) {      return 'transparent';    }    return state.valid ? 'green' : 'red';  }   class Input extends React.Component {    constructor() { ... }    validate = (event) => { ... }    render () {      return (        <label>          {this.props.label}          <input type={this.props.type} onChange={this.validate}/>          <div className="indicator" style={{            height: "20px",            width: "20px",            backgroundColor: getIndicatorColor(this.state)          }}></div>        </label>      )    }  }  ...</script>

Now, open index.html on your browser, and ...