Method render

src/DropdownToggle.js:61–130

()

  }

  render() {
    const {
      className,
      color,
      cssModule,
      caret,
      split,
      nav,
      tag,
      innerRef,
      ...props
    } = this.props;
    const ariaLabel = props['aria-label'] || 'Toggle Dropdown';
    const classes = mapToCssModules(
      classNames(className, {
        'dropdown-toggle': caret || split,
        'dropdown-toggle-split': split,
        'nav-link': nav,
      }),
      cssModule,
    );
    const children =
      typeof props.children !== 'undefined' ? (
        props.children
      ) : (
        <span className="visually-hidden">{ariaLabel}</span>
      );

    let Tag;

    if (nav && !tag) {
      Tag = 'a';
      props.href = '#';
    } else if (!tag) {
      Tag = Button;
      props.color = color;
      props.cssModule = cssModule;
    } else {
      Tag = tag;
    }

    // extracted the rendering of the Tag component
    const returnFunction = ({ ref }) => {
      const handleRef = (tagRef) => {
        ref(tagRef);
        const { onToggleRef } = this.context;
        if (onToggleRef) onToggleRef(tagRef);
      };

      return (
        <Tag
          {...props}
          {...{ [typeof Tag === 'string' ? 'ref' : 'innerRef']: handleRef }}
          className={classes}
          onClick={this.onClick}
          aria-expanded={this.context.isOpen}
          aria-haspopup={this.getRole()}
          children={children}