render() {
    const currentValue = this._getCurrentValue();
    const tabIndex = !this.props.disabled ? this.props.tabIndex : -1;

    let characterStyle = {
      ...style.characterStyle,
      ...this.props.characterStyle,
    };

    if (this.state.isActive) {
      characterStyle = {
        ...characterStyle,
        ...style.activeCharacterStyle,
        ...this.props.activeCharacterStyle,
      };
    } else if (this.state.isHover) {
      characterStyle = {
        ...characterStyle,
        ...style.hoverCharacterStyle,
        ...this.props.hoverCharacterStyle,
      };
    }

    let wrapperStyle = {
      ...style.style,
      ...this.props.style,
    };
    if (this.props.disabled) {
      wrapperStyle = {
        ...wrapperStyle,
        ...style.disabledStyle,
        ...this.props.disabledStyle,
      };
      if (this.state.isHover) {
        wrapperStyle = {
          ...wrapperStyle,
          ...style.disabledHoverStyle,
          ...this.props.disabledHoverStyle,
        };
      }
    } else {
      if (this.state.isFocus && this.preventFocusStyleForTouchAndClick) {
        wrapperStyle = {
          ...wrapperStyle,
          ...style.focusStyle,
          ...this.props.focusStyle,
        };
      }

      if (this.state.isHover) {
        wrapperStyle = {
          ...wrapperStyle,
          ...style.hoverStyle,
          ...this.props.hoverStyle,
        };
      }
    }

    return (
      <div
        ref="wrapper"
        style={ wrapperStyle }
        className={ unionClassNames(this.props.className, this.ratingWrapperStyleId) }
        onKeyDown={ this._onKeyDown }
        onMouseEnter={ this._onMouseEnter }
        onMouseMove={ this._onMouseMove }
        onMouseLeave={ this._onMouseLeave }
        onMouseUp={ this._onMouseUp }
        onMouseDown={ this._onMouseDown }
        onTouchStart={ this._onTouchStart }
        onTouchMove={ this._onTouchMove }
        onTouchEnd={ this._onTouchEnd }
        onTouchCancel={ this._onTouchCancel }
        onContextMenu={ this._onContextMenu }
        onBlur={ this._onBlur }
        onFocus={ this._onFocus }
        tabIndex={ tabIndex }
        aria-label = { this.props['aria-label'] }
        aria-valuemax = { 5 }
        aria-valuemin = { 1 }
        aria-valuenow = { this.state.value }
        aria-disabled = { this.props.disabled }
        {...this.state.wrapperProps}
      >
        {
         React.Children.map([1, 2, 3, 4, 5], (value) => {
           const ratingStyle = (currentValue >= value) ? characterStyle : {};
           return (
             <span
               data-belle-value= { value }
               style={ ratingStyle }
               {...this.state.characterProps}
             >
               { this.props.character }
             </span>
           );
         })
        }
      </div>
    );
  }
Returns the HTML function to be rendered by this component.