Пустая кнопка в конце группы кнопок после перебора массива в Bootstrap / Reactstrap

Question

Эта пустая кнопка генерируется в конце группы кнопок. Не уверен, почему и попытки предотвратить его рендеринг не работают.

Это использует Bootstrap и Reactstrap.

Вот массив, который ничего не показывает в конце:

constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
        options: [
            5, 10, 15, 20, 25,
            30, 35, 40, 45, 50,
            'Mean',
            55, 60, 65, 70, 75,
            80, 85, 90, 95
        ]           
    }
}

Здесь итерируется и отображается:

        <Popover placement='bottom' isOpen={popoverOpen} target={k} toggle={this.toggle}>
            <PopoverHeader>Select New Percentile</PopoverHeader>
            <PopoverBody>
                <ButtonGroup size='sm'>
                    {
                        _.map(options, o => {
                            if (o) {
                                return (<Button key={o}>{o}</Button>)                                            
                            }
                        })
                    }
                    <Button></Button>
                </ButtonGroup>
            </PopoverBody>
        </Popover>

Answer 1

Я не вижу проблем в коде вашей карты, но проблема заключается в пустой кнопке, которую вы добавили после кода карты

 <Button></Button>

class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = { 
          options: [
        5, 10, 15, 20, 25,
        30, 35, 40, 45, 50,
        'Mean',
        55, 60, 65, 70, 75,
        80, 85, 90, 95
      ],  };

  }

  render() {
    return (
      <div className="App">
        <h1>New Component </h1>
        {this.state.options.map((options, o) => {
          if (o) {
            return (<button key={o}>{o}</button>)
          }
        }
        )}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='root'></div>

    <Popover placement='bottom' isOpen={popoverOpen} target={k} toggle={this.toggle}>
        <PopoverHeader>Select New Percentile</PopoverHeader>
        <PopoverBody>
            <ButtonGroup size='sm'>
                {
                    _.map(options, o => {
                        if (o) {
                            return (<Button key={o}>{o}</Button>)                                            
                        }
                    })
                }
                <Button></Button> //delete this
            </ButtonGroup>
        </PopoverBody>
    </Popover>