Source: components/filterbox/Filter.js

import React, { Component } from 'react'
import Keywords from './Keywords'
import Select from 'react-select';
import 'react-select/dist/react-select.css';
import getTranslation from '../../i18n/'
import './select.css'

/**
 * Filter for the knowledge platform and yellow pages + events section
 */
class Filter extends Component {

  constructor(props) {
    super(props);
    this.state = {
        tags: []
    }
  }

  /**
   * Toggle a filter
   * @param {} id 
   */
  toggleFilter(id) {
    this.props.toggleFilter(this.props.filter.id, id)
  }

  /**
   * Update the active tags
   * @param {} tags 
   */
  updateTags(tags) {
      this.props.keywordFilter(tags)
      this.setState({tags: tags})
  }


  render() {

         let options = this.props.filter.filter;

         options.sort(function(a, b) {
         var textA = a.label.toUpperCase();
         var textB = b.label.toUpperCase();
         return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
         });

         let value = 0;

        value = {id: 0, label: getTranslation("filterbox.filter.all"), active: false};
        this.props.filter.filter.map(single => {
            if(single.active) {
                value = single
            }
        })

        if(options.filter(option => option.id === 0).length !== 0) {
            let index = options.indexOf(options.filter(option => option.id === 0)[0]);
            options.splice(index, 1);
        }
        options.unshift({id: 0, label: getTranslation("filterbox.filter.all"), active: false})

     options = options.filter(function(item, pos) {
         return options.indexOf(item) == pos;
     })

    return(
      <div>

      {!this.props.filter.fullLayout &&
        <div>
        <label>{this.props.title}:</label>

        <div className="filterbox-content">
        {this.props.filter.filter.length > 12 &&
            <div>
            <Select
                searchable={false}
                name={"select-filter-"+this.props.filter.id}
                value={value}
                options={this.props.filter.filter}
                clearable={false}
                onChange={(value) => this.toggleFilter(value.id)}
              />
            </div>
        }
        {this.props.filter.filter.length <= 12 &&
            <div>
                <div>
                {this.props.filter.filter.map((filter, index) =>
                  <button key={index} className={"btn " + (filter.active ? "btn-green" : "btn-gray")} onClick={() => this.toggleFilter(filter.id)}>{filter.label}</button>
                )}
                </div>
                <div>
                {this.props.filter.additionalFilter &&
                    <div>
                        <div className="form-group">
                            <label>{getTranslation("filter.tags")}:</label>
                            <Keywords tags={this.props.tags} activeTags={this.state.tags} updateTags={(tags) => this.updateTags(tags)} />
                        </div>

                    </div>
                }
                </div>
            </div>
        }

        </div>
        </div>
    }
    </div>
    )
  }
}




export default Filter