Humane React: Example 03.a

Primary component with two sub-components -- pass in configurable field name

by kaisershahid

HTML

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

React

class ErrorMessage extends React.Component {
    render() {
        const {message} = this.props;
        const styles = {
            display: message == null ? 'none' : 'block',
            background:'red',
            color: 'white'
        };
        return <div className="errorMessage" style={styles}>{message}</div>
    }
}

class Textbox extends React.Component {
    validate(event) {
        const callback = this.props.validationCallback || (() => {});
        if (!event.currentTarget.value.match(/^\w+$/)) {
            callback('Invalid date: ' + event.currentTarget.value);
        }
    }

    render() {
        return <input type="text" name={this.props.name || "expirationDate"} disabled={this.props.disabled ? true : false}
            onBlur={(event) => this.validate(event)} />
    }
}

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()} />
            <Textbox validationCallback={(message) => this.setErrorMessage(message)} disabled={!this.state.inputChecked} name={this.props.expirationName} />
            <ErrorMessage message={this.state.errorMessage} />
        </div>;
    }
}

ReactDOM.render(<OptionalExpirationDate expirationName="customName" />, document.getElementById('example-03'));