components/TimezoneSelect.js

import React, { Component } from 'react';
import { COUNTRY_TIMEZONES, LOCAL_STORAGE_KEYS } from '../constants';

export default class TimezoneSelect extends Component {
  constructor(props) {
    super(props);
    /**
     * @member {object}
     */
    this.state = {
      selectOpen: false,
      selectedFieldName: this.props.selectedTimezone.label || COUNTRY_TIMEZONES[1].label,
    };
  }

  openCloseSelect = () => {
    this.setState({ selectOpen: !this.state.selectOpen });
  };

  selectTimezone = (field) => {
    this.getSelectedItem(field.label);
    localStorage.setItem(LOCAL_STORAGE_KEYS.SELECTED_TIMEZONE, field.id);
    this.props.setSelectedTimeZone(field);
    this.openCloseSelect();
  };

  getSelectedItem = (fieldName) => {
    this.setState({ selectedFieldName: fieldName });
  };

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <div className="time-zone">
        <div className={`time-zone__holder ${this.state.selectOpen ? 'is-open' : ''}`}>
          <div className="time-zone__wrap" onClick={() => this.openCloseSelect()}>
            <div className="time-zone__label">Time Zone:</div>
            <div className="time-zone__value">{this.state.selectedFieldName}</div>
          </div>
          <span className="time-zone__icon" />
          <div className="time-zone__list">
            {COUNTRY_TIMEZONES.map((field) => (
              <div className="time-zone__list-item" key={field.id} onClick={this.selectTimezone.bind(this, field)}>
                {field.label}
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}