0 value not displaying in DropdownToggle

[tagyoureit]

• components: DropdownToggle
• reactstrap version #8.0.0
• import method umd/csj/es es
• react version #16.8.6
• bootstrap version #4.0.0

What is happening?

I'm passing props to a custom component that sometimes has the value of 0. The render in my custom file looks like this:

    return (
      <div>
        <ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggleDropDown} disabled={this.state.disabled} >
          <DropdownToggle caret disabled={this.state.disabled}>
            {this.props.currentMinute}
          </DropdownToggle>
          <DropdownMenu>
            {positions()}
          </DropdownMenu>
        </ButtonDropdown>
      </div >
    )

When the value of currentMinute=0 the display shows this:

(In the yellow box the 0 comes from the parent file.)

What should be happening?

0 should be displayed as a value just like the other values (

Steps to reproduce issue

It appears that reactstrap is treating this 0 as a boolean value. If I change the code to display based on an if/else {this.props.currentMinute === 0 ? '0' : this.props.currentHour} it does display properly.

Interestingly, it seems if I put any other code as a child here it does render properly. For example, {this.props.currentMinute}{'anything else'} will show 0anything else.

Error message in console

No error

Code

https://stackblitz.com/edit/react-7zzcjw

[TheSharpieOne]

Probably due to

reactstrap/src/DropdownToggle.js

Line 63 in c844ab1

const children = props.children || <span className="sr-only">{ariaLabel}</span>;

For now, you can just use this.props.currentMinute.toString() or something like <span>{this.props.currentMinute}</span>

[tagyoureit]

Thanks. I settled on {this.props.currentMinute}{''} for now and it is working fine.

[kyletsang]

Closing as fixed