Humane React: Example 03

by kaisershahid

HTML

<div id="example-03"></div>

React

class OptionalExpirationDate extends React.Component {
    state = {inputChecked: false, errorMessage: null};

    toggleCheckbox() {
        this.setState({...this.state, inputChecked: !this.state.inputChecked});
        return this;
    }

    setErrorMessage(msg) {
        this.setState({...this.state, errorMessage: msg});
        return this;
    }

    render() {
        return <div className="optional-expiration-date">
            <input type="checkbox" name="enableExpiration" onClick={() => this.toggleCheckbox()} />
            <input type="text" name="expirationDate"
                disabled={this.state.inputChecked ? false : true} />
            <div className="errorMessage"
                style={{
                    display: this.state.errorMessage == null ? 'none' : 'block',
                    background: 'red', color: 'white'
                }}>{this.state.errorMessage}</div>
        </div>;
    }
}

let opt = <OptionalExpirationDate />;
ReactDOM.render(opt, document.getElementById('example-03'));