How can I change these filter buttons into a dropdown menu?

Question

I currently have a group of buttons that work to filter items. I want to change the buttons into a dropdown menu. I am having issues because my logic works onClick and dropdown menus don't allow for a an onClick handler.

Here is the code for the js logic

here is where it is being rendered

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>

  renderYearFilters () {
      const { years } = this.compileFilters();
      const { activeFilters, activeRecords } = this.state;
      const records = activeFilters.size
          ? activeRecords
          : Object.keys(this.props.records).map(key => Object.assign(this.props.records[key], {id: key}));


      return years.map(year => {
          const active = activeFilters.has(`${FILTER_TYPE_YEAR}=${year}`) ? true : false;
          const yearName = year; // .toSnakeCase(); // .toLowerCase().replace(/ /g, '-').replace(/[\/\\]/g, 'and')
          // TODO: This is really expensive, can be majorly improved
          const count = records.filter(record => {
            // console.log('YEAR', Math.floor(new Date(record['launch-date']).getFullYear() / 10) * 10, year);
            return Math.floor(new Date(record['launch-date']).getFullYear() / 10) * 10 == year
          }).length;
          const classNames = [
              active ? 'active' : null,
              count > 0 ? null : 'hide',
          ];

          return (
              <FilterButton
                  onClick={this.toggleFilter(FILTER_TYPE_YEAR, year).bind(this)}
                  className={classNames.join(' ')}
                  key={year}
              >
                  {year} ({count})
              </FilterButton>
               

          );
      });
  }


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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>

<form>
                                    <FilterTypeHeader>Operator</FilterTypeHeader>
                                    <FilterTypeWrapper>
                                        {this.renderOperatorFilters()} 
                                    </FilterTypeWrapper>
                                    <FilterTypeHeader>Mission Type</FilterTypeHeader>
                                    <FilterTypeWrapper>
                                        {this.renderMissionTypeFilters()} 
                                    </FilterTypeWrapper>
                                    <FilterTypeHeader>Year</FilterTypeHeader>
                                    <FilterTypeWrapper>
                                        {this.renderYearFilters()}
                                    </FilterTypeWrapper>
                                    
                                </form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

use the onchange event handler similar to this https://stackoverflow.com/questions/29108779/how-to-get-selected-value-of-a-dropdown-menu-in-reactjs — nraduka, Jun 28 '19 at 21:05
I had tried attaching the onChange handler before posting but it did not do anything. — stephp, Jun 30 '19 at 16:14

How can I change these filter buttons into a dropdown menu?

0 Answers0