This is simple code which can save some of your time, if you trying to build Select field for timezones. Find below for complete Timezones code

Timezones

Find below for Timezones.js which contains all timezone names and values
export default [
    {"value":"America/Adak","name":"Adak"},
    {"value":"America/Anchorage","name":"Anchorage"},
    {"value":"America/Anguilla","name":"Anguilla"},
    {"value":"America/Antigua","name":"Antigua"},
    .....
  ];

Normal Select Box

This normal select box in which Timezones were mapped as options
<select value={this.state.timezone} onChange={this.onSelect}>
           {Timezones.map((timezone) => <option value={timezone.value}>{timezone.name}</option>)}
</select>

React-bootstrap Select box

This Select box uses bootstrap styles and components
<FormControl value={this.state.timezone} onChange={this.onSelect} componentClass="select" placeholder="select">
    {Timezones.map((timezone) => <option value={timezone.value}>{timezone.name}</option>)}
</FormControl>

React-select Select box

react-select is React version of Select2. 
<Select value={this.state.timezone} onChange={this.onSelect2} placeholder="select" options={Timezones} labelKey="name" valueKey="value">
</Select>

Complete component code

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-select/dist/react-select.min.css';
import React from 'react';
import Timezones from './Timezones';
import {FormControl} from 'react-bootstrap';
import Select from 'react-select';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      timezone:'America/Aruba'
    }
    this.onSelect = this.onSelect.bind(this);
    this.onSelect2 = this.onSelect2.bind(this);
  }

  onSelect(event) {
    this.setState({
      timezone:event.target.value
    });
  }

  onSelect2(language) {
    this.setState({
      timezone:language.value
    });
  }

  render() {
    return (
      <div>
        <h1>Select box for Timezones</h1>
        <select value={this.state.timezone} onChange={this.onSelect}>
           {Timezones.map((timezone) => <option value={timezone.value}>{timezone.name}</option>)}
        </select>
        <br/><br/><br/>
        <h1>Bootstrap Select box for Timezones</h1>
        <FormControl value={this.state.timezone} onChange={this.onSelect} componentClass="select" placeholder="select">
          {Timezones.map((timezone) => <option value={timezone.value}>{timezone.name}</option>)}
        </FormControl>
        <br/><br/><br/>
        <h1>React Select2 for Timezones</h1>
        <Select value={this.state.timezone} onChange={this.onSelect2} placeholder="select"
           options={Timezones} labelKey="name" valueKey="value">
        </Select>
      </div>
    )
  }
}

19 comments:

  1. Hi there, You've done an incredible job. I will definitely digg it and in my view suggest to my friends.I am sure they will be benefited from this web site.
    kissmanga

    ReplyDelete
  2. nice blog...looking for more useful information....For Online accounting services please visit here:
    https://meralegal.com/accounting.php

    ReplyDelete
  3. The very Nice post to read from the interesting article and I really like that one of the interesting content in the post and really helpful for me and for other readers on that website to read that, I am expecting more such kind of posting from the writer So Nice. I know party rentals bethesda md . they provide better service
    https://dcpartyrentalsupply.com/blog-party-rental-bethesda-md/
    party rentals bethesda md

    ReplyDelete
  4. Thank you for this informative post

    Get Six Sigma Certification Online with HenryHarvin.
    Learn from experts and be on top

    ReplyDelete
  5. พบกับหวยรูปแบบใหม่ที่สามารถแทงได้ทุกที่ ทุกเวลาด้วยตัวท่านเองผ่านมือถือของคุณเอง

    หวยออนไลน์ ของเราคุณจะสามารถแทงได้ตลอดไม่มีการอั้นเลขเหมือนแผงหวยททั่วไป

    ถ้านึกถึงหวยออนไลน์ต้อง Click1234 เปิดประสบการ์ณใหม่ๆกับการแทงหวยของคุณ

    ReplyDelete
  6. ERP Gold Software
    How ERP Gold works as an inventory management software for Walmart
    Why do sellers on Walmart need inventory management software?
    Inventory management involves the process of ordering, handling, storing, and processing a company’s inventory. This has done because, without an effective inventory management system, the full potential of the supply chain becomes unattainable.
    For more information about ERP Gold inventory management software, please click on the link below.
    https://www.erp.gold/walmart-erp-integration-software/

    ReplyDelete
  7. Thanks for sharing a really very nice and wonderful article i like your blog too much

    ReplyDelete
  8. Thank you for sharing your info. I really appreciate your efforts and I am waiting for your further write ups thank you once again.Electrical design for building construction


    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts