Timezones Select Box Using ReactJS

Sunday, 8 January 2017 | Posted by
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>
    )
  }
}
Labels:

51 comments:

  1. Tony Stark30 July 2018 at 01:56

    PLC Training in Chennai | PLC Training Institute in Chennai | PLC Training Center in Chennai | PLC SCADA Training in Chennai | PLC SCADA DCS Training in Chennai | Best PLC Training in Chennai | Best PLC Training Institute in Chennai | PLC Training Centre in Chennai | Embedded System Training in Chennai | Embedded Training in Chennai | VLSI Training in Chennai | VLSI Training Institute in Chennai

    ReplyDelete
  2. Tony Stark30 July 2018 at 01:56

    PLC Training in Chennai | PLC Training Institute in Chennai | PLC Training Center in Chennai | PLC SCADA Training in Chennai | PLC SCADA DCS Training in Chennai | Best PLC Training in Chennai | Best PLC Training Institute in Chennai | PLC Training Centre in Chennai | PLC SCADA Training in Chennai | Automation Training Institute in Chennai | PLC Training in Kerala | VLSI Training in Chennai | Best VLSI Training in Chennai | VLSI Training Centres in Chennai | VLSI Courses in Chennai | VLSI Training Courses in Chennai | VLSI Training Institute in Chennai | VLSI Training Institutes in Chennai | Best VLSI Training Institute in Chennai

    ReplyDelete
  3. Tony Stark30 July 2018 at 01:56

    Embedded Training in Chennai | Best Embedded Training in Chennai | Embedded System Training in Chennai | Embedded System Training Institute in Chennai | Best Embedded System Training Institute in Chennai | Embedded Course in Chennai | Embedded System Training Institutes in Chennai | Embedded System Training Center in Chennai | Best Embedded System Training in Chennai | Embedded Systems Training in Chennai | VLSI Training in Chennai | VLSI Training Institute in Chennai

    ReplyDelete
  4. FLIP DIVING15 November 2018 at 23:01

    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
  5. Unknown5 October 2019 at 18:04

    paito warna china
    data sydney update
    datahk
    syair sydney
    syairsgp
    datasgp
    paito warna terlengkap
    http://warungsgp.com/
    live hk 6d
    live sydney

    ReplyDelete
  6. smartdeveloper30 August 2020 at 08:19

    Amazing Article ! I would like to thank you for the efforts you had made for writing this awesome article.
    Thanks for sharing such a nice info.I hope you will share more information like this. please keep on sharing!



    internship in chennai
    internship in chennai for cse
    internship for mba in chennai
    internship in chennai for hr
    internship in chennai for mba
    companies for internship in chennai
    internship in chennai for ece
    paid internship in chennai
    internship in chennai for biotechnology
    internship in chennai for b.com students

    ReplyDelete
  7. invincible019 September 2020 at 02:44

    Amazing Article,Really useful information to all So, I hope you will share more information to be check and share here.


    internship in chennai for electrical engineering students
    one month internship in chennai
    vlsi internship in chennai
    unpaid internship in chennai
    internship for hr in chennai
    internship training chennai
    internship for freshers in chennai
    internship in chennai for it students with stipend
    internship in accenture chennai
    naukri internship in chennai

    ReplyDelete
  8. MeraLegal.Com21 October 2020 at 04:39

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

    ReplyDelete
  9. Md. Manzurul Islam28 October 2020 at 21:21

    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
  10. Six sigma certification 4 November 2020 at 02:27

    Amazing information

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

    ReplyDelete
  11. Six sigma certification 4 November 2020 at 02:28

    Thank you for this informative post

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

    ReplyDelete
  12. Six sigma certification 4 November 2020 at 02:29

    Well written article, loved it!
    Get Lean Six Sigma Green Belt Certification with HenryHarvin.
    Learn from experts and be on top

    ReplyDelete
  13. Blognews.12348 November 2020 at 20:05

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

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

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

    ReplyDelete
  14. Hania khan1 December 2020 at 21:38

    http://ashstyles.com/

    ReplyDelete
  15. Hania OCS7 December 2020 at 00:51

    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
  16. Isabella13 December 2020 at 01:38

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

    ReplyDelete
  17. ilander vijay9 January 2021 at 01:16

    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
  18. love back Solution23 February 2021 at 02:54

    This blog is very interesting to read, this contains more useful information, Keep sharing more blogs

    Vashikaran Specialist in Jalandhar  Vashikaran Specialist in Pune  Vashikaran Specialist in Chandigarh  Vashikaran Specialist in Ludhiana  Vashikaran Specialist in Haryana
    Vashikaran Specialist in Faridabad Gurgaon PanchkulaVashikaran Specialist in Indore Bhopal Gwalior  

    ReplyDelete
  19. AlanBarlow24 March 2021 at 23:14

    Have seen this thing on a few different website and wanted to do it for some time. Now I can say I am able to do it efficiently:
    buy logo

    ReplyDelete
  20. rutuja22 April 2021 at 04:23

    I am very happy after visiting your website with very useful information. I am from one of the digital marketing agency... To visit my agency click on link Visitdigitalguru

    ReplyDelete
  21. Lucas Davies31 May 2021 at 05:32

    If you are willing to experience versatility then there is no one better than our Busty Escorts Service in Haridwar.
    These Cheap Escorts Service in Haridwar can be compared with the heavenly divas holding the best sensual moves.
    Thus you will never miss out on anything when you are with our Escorts Agency in Agra.
    Understanding your desires our Call Girls Booking in Jaipur craft the session that gives an exceptional pleasure to the clients.
    Our Call Girls Booking in Indore are certainly rewarding for our clients.
    These babes never hide anything from the clients or show any sort of tantrums.
    Offering the best service to their clients, Call Girls Booking in Haridwar showcases everything in front of you.
    Now you need to choose your best mode of satiation.

    ReplyDelete
  22. rutuja3 June 2021 at 06:34

    Thanks for sharing information with us…satisfied after visiting your blog…. Learn the latest trends & their practical application by experts with us…you can contact us click on
    Visit ISMT India

    ReplyDelete
  23. 먹튀신고9 June 2021 at 23:55

    I am the one who writes on a topic similar to yours. I hope you come to my blog and take a look at the posts I've been writing. 메이저놀이터검증

    ReplyDelete
  24. Bhavani Propladder13 July 2021 at 22:23

    Ambience Courtyard
    Sumadhura Horizon
    The Botanika
    Spring is in the air
    Aditya Athena

    ReplyDelete
  25. Sumadhura13 July 2021 at 22:43

    Great Blog...thanks for sharing with us...and i have some information about Sumadhura Horizon is a residential project developed by Sumadhura Infracon Pvt. Ltd, located in Kondapur, Hyderabad. It is provides 3BHK Luxury Flats in affordable prices.

    Sumadhura Horizon
    Sumadhura Horizon Hyderabad
    Sumadhura Horizon Kondapur

    ReplyDelete
  26. Ambience 13 July 2021 at 23:07

    I really like your blog thanks for sharing...and i have some information about Ambience Courtyard developed by Koncept Ambience Group, located in Manikonda, Hyderabad. Project provides 2,2.5 & 3bhk bedroom luxury flats available for sale in affordable prices.

    Ambience Courtyard
    Ambience Courtyard Hyderabad
    Ambience Courtyard Manikonda
    Ambience Courtyard Manikonda Hyderabad


    ReplyDelete
  27. Botanika14 July 2021 at 21:39

    Nice Blog Thans for sharing with us...and i have some information about....The botanika is a new residential project located in Gachibowli, Hyderabad. This project offers 3 BHK Luxury Apartments in Affordable Prices. Contact Us@ 98492 05577

    The Botanika
    The Botanika Hyderabad
    The Botanika Gachibowli

    ReplyDelete
  28. Aditya Athena14 July 2021 at 21:59

    Great Information...Thanks for sharing with us...Aditya Athena is a brand new residential project developed by Sri Aditya Homes located in Shaikpet, Hyderabad. It offers 2bhk and 3bhk Residential Apartments in affordable prices.

    Aditya Athena
    Sri Aditya Athena
    Aditya Athena Hyderabad
    Aditya Athena Shaikpet

    ReplyDelete
  29. Spring is in the air14 July 2021 at 22:19

    Nice Article...Thanks for sharing with us...i have some information about Spring Is In The Air Urbanrise project Developed by Manhattan Condos, Located in Miyapur, Hyderabad. It Provides 2bhk & 3bhk Luxury Flats Available.

    Spring Is In The Air
    Spring Is In The Air Urbanrise
    Spring Is In The Air Urbanrise Miyapur
    Spring Is In The Air Urbanrise Hyderabad

    ReplyDelete
  30. Poojita Propladder15 July 2021 at 22:10

    Your selection of topic is very good and also well written. Thanks for sharing. I feel like all your ideas are incredible! Great job!!!
    I have some information about:
    Brigade Citadel
    Pooja Magic Breeze
    Ramky One Harmony
    Luxury Park 2

    ReplyDelete
  31. Brigade Citadel15 July 2021 at 22:24

    Nice blog,Thanks for sharing with us.
    Indis Viva City
    Brigade Citadel
    Ramky One Galaxia
    Prestige High Fields

    ReplyDelete
  32. sanshi16 July 2021 at 08:29

    Thanks for your sharing great article, I am very happy to read this article and I like it very much!I would also recommend it to my friends.
    sun news live
    sun news
    sun tv live
    news 7 live
    sun news live today
    sun tv news
    sun tv news live
    sun tv live news
    சன் நியூஸ்
    thanthinews

    ReplyDelete
  33. Brigade Citadel16 July 2021 at 22:41


    I appreciate the way you write your blog which is very informative , I have some information about

    Brigade Citadel
    Brigade Citadel Motinagar
    Brigade Citadel Hyderabad
    Brigade Citadel Kukatpally
    Brigade Citadel Motinagar Hyderabad

    ReplyDelete
  34. Pooja Magic Breeze16 July 2021 at 22:48

    Great blog created by you. I read your blog, its best and useful information. You have done a good work. Thanks...
    Happy blogging and keep posting !

    Pooja Magic Breeze
    Magic Breeze
    pooja crafted homes magic breeze
    magic breeze narsingi
    magic breeze Hyderabad
    Pooja magic breeze Hyderabad

    ReplyDelete
  35. Luxury Park216 July 2021 at 22:56

    I enjoyed reading your post.You make so many great points here that I read your article a couple of times.
    Luxury Park 2
    Luxury Park 2 Mamidipally
    Luxury Park 2 Hyderabad

    ReplyDelete
  36. Jyothika Propladder16 July 2021 at 23:03

    Nice Blog,I feel like all your ideas are incredible! Great job!!!
    I have some information about:

    Pbel City
    ASBL Spire
    Phoenix Luxury Park 1
    Aspire Spaces Ameya
    Aspire Ameya

    ReplyDelete
  37. Ramky One Harmony16 July 2021 at 23:03

    I love the way you write and share your niche! Very interesting and different! Great job!!! I have some information about:
    Ramky One Harmony
    Ramky One Harmony Pragathi Nagar
    Ramky One Harmony Hyderabad
    Ramky One Harmony Pragathi Nagar Hyderabad

    ReplyDelete
  38. Prestige Tranquil21 July 2021 at 22:44

    Prestige Tranquil
    Prestige Tranquil Kokapet
    Prestige Tranquil Hyderabad
    Prestige Tranquil Kokapet Hyderabad

    ReplyDelete
  39. Poojita Propladder5 August 2021 at 04:13

    I enjoyed reading your post.You make so many great points here that I read your article a couple of times.
    Asrithas Jewels County
    Asrithas Jewels County Hyderabad

    ReplyDelete
  40. VISIT ME9 August 2021 at 00:24

    Many thanks for the article, I have a lot of spray lining knowledge but always learn something new. Keep up the good work and thank you again. 토토사이트

    ReplyDelete
  41. VISIT ME9 August 2021 at 00:25

    I’m writing on this topic these days, , but I have stopped writing because there is no reference material. Then I accidentally found your article. I can refer to a variety of materials, so I think the work I was preparing will work! Thank you for your efforts. 경마사이트

    ReplyDelete
  42. VISIT ME9 August 2021 at 00:25

    You completely match our expectation and the variety of our information 바카라사이트

    ReplyDelete
  43. Kashan Baig14 August 2021 at 05:56

    Much thanks to you for your blog article.Really anticipating read more. Will peruse on…

    amazidshop

    ReplyDelete
  44. Digital Marketing Hub11 September 2021 at 10:30

    My name is Upan, I have more than 3 years of experience in Shopify dropshipping store development and products listing. I help my clients to boost their sales by importing the best product reviews for their products.

    Will you import reviews from aliexpress to shopify?
    Order Link: https://www.fiverr.com/share/XmW1Em

    ReplyDelete
  45. Haris14 September 2021 at 01:13

    I like your written way thanks for sharing it with us.


    law dissertation Writers

    ReplyDelete
  46. rahul23 September 2021 at 03:16

    Nice blog, Informative. Thanks for sharing
    Prestige Tranquil
    Vaishnavi Houdini
    Soul of Twin Cities
    provident kenworth
    prestige high fields
    Frontline Seven
    Urbanrise Codename Talk Of Hyderabad

    ReplyDelete
  47. Amaze Technology17 December 2021 at 03:38

    thanku so much this information
    amazetechnology

    ReplyDelete
  48. Packers Movers Meerut22 January 2022 at 07:24

    Packers Movers in Meerut is a relaible packers in meerut city uttarpradesh,Meerut packer movers company are pruvide a best packers and movers service company of meerut, when you need a packers and movers copany in meerut then Meerut packers and movers provide for packers and movers services by one phone call .
    Contact No. +91-8755349171,+91-7217000501

    Packers Movers in Meerut
    Packers Movers in Modipuram
    Packers Movers in Shastrinagar
    Packers Movers in Ganganagar
    Packers Movers in Saharanpur
    Packers Movers in Muzaffarnagar

    ReplyDelete
  49. imageexpertindia1 July 2022 at 02:17

    Thank you so much for this information.

    https://imageexpertindia.com/long-shadow-photoshop-basic-tutorial/
    Creating a drop shadow is a cycle that ought to go with your section as it assists with making your picture look more reasonable. This little realistic detail can truly have an effect since it makes the item more straightforward to examine.

    Reflection Shadow
    Photoshop Shadow Effect Service
    Natural Drop Shadow Service
    Realistic shadow in photoshop
    Floating Shadow Creation
    Castaway Shadow Creation

    ReplyDelete
  50. Payal gupta18 July 2022 at 22:56

    "This is a really good write up . I loved it .
    Excellent article . Keep up the good work
    Thank you.
    "
    https://groundcyber.com/digital-marketing-course-bareilly/

    ReplyDelete

Subscribe to: Post Comments (Atom)

Blogroll

Popular Posts