Languages 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 languages. Find below for complete code

Languages

Find below Languages.js which contains all language names and codes
export default [
    {"value":"English","code":"EN"},
    {"value":"Japanese","code":"JA"},
    {"value":"Afrikaans","code":"AF"},
    {"value":"Albanian","code":"SQ"},
    ......
];

Normal Select Box

This normal select box in which Languages were mapped as options
<select value={this.state.lang} onChange={this.onSelect}>
    {Languages.map((language) => <option value={language.code}>{language.value}</option>)}
</select>

React-bootstrap Select box

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

React-select Select box

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

Complete component code

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

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      lang:'EN'
    }
    this.onSelect = this.onSelect.bind(this);
    this.onSelect2 = this.onSelect2.bind(this);
  }

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

  onSelect2(language) {
    this.setState({
      lang:language.code
    });
  }

  render() {
    return (
      <div>
        <h1>Select box for languages</h1>
        <select value={this.state.lang} onChange={this.onSelect}>
           {Languages.map((language) => <option value={language.code}>{language.value}</option>)}
        </select>
        <br/><br/><br/>
        <h1>Bootstrap Select box for languages</h1>
        <FormControl value={this.state.lang} onChange={this.onSelect} componentClass="select" placeholder="select">
          {Languages.map((language) => <option value={language.code}>{language.value}</option>)}
        </FormControl>
        <br/><br/><br/>
        <h1>React Select2 for languages</h1>
        <Select value={this.state.lang} onChange={this.onSelect2} placeholder="select"
           options={Languages} labelKey="value" valueKey="code">
        </Select>
      </div>
    )
  }
}
Labels:

69 comments:

  1. Karen Santiago20 October 2017 at 02:12

    Notwithstanding, it is practically the same with your handleChange work. Since it takes the incentive as the contention, not the occasion. So that there is no objective property inside passed contention.I using this problem in the modification work of best essay writing service and it's really working.

    ReplyDelete
  2. Tony Stark30 July 2018 at 01:54

    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
  3. Tony Stark30 July 2018 at 01:54

    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
  4. Tony Stark30 July 2018 at 01:55

    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
  5. FLIP DIVING15 November 2018 at 23:01

    The website is looking bit flashy and it catches the visitors eyes. Design is pretty simple and a good user friendly interface.
    driving directions

    ReplyDelete
  6. The India3 October 2019 at 22:20

    PPC Service in Delhi
    PPC Companies in Delhi
    SEO Company in Delhi
    SEO Company in Delhi NCR
    SMO Company in Delhi
    SMO Company in India

    ReplyDelete
  7. 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
  8. riya30 August 2020 at 06:37

    SUPER ARTICLE
    internship in chennai for mechanical engineering
    internship in chennai for mba finance
    internship in bmw chennai
    internship jobs in chennai
    internship in chennai for civil engineering students
    internship in chennai for mba hr
    internship in chennai for eee students
    internship for biotechnology in chennai
    internship in chennai for bba students
    internship in chennai for engineering students

    ReplyDelete
  9. invincible011 October 2020 at 06:58

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


    inplant training
    inplant training chennai
    inplant training in chennai
    inplant training at chennai
    inplant training
    inplant training chennai
    inplant training in chennai
    inplant training at chennai
    inplant training
    Inplant Training for cse

    ReplyDelete
  10. maherleathers2 October 2020 at 01:17

    Thanks for sharing The Awesome content. I will also share with my friends. Great Content thanks a lot.
    http://maherleathers.com

    ReplyDelete
  11. CLOVIS ENTERPRISES13 October 2020 at 02:32

    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.
    https://clovisentp.com
    https://www.clovisentp.com/products.php?live=7-195-0-0

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

    Amazing information

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

    ReplyDelete
  13. Six sigma certification 4 November 2020 at 02:31

    Thank you for this informative post

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

    ReplyDelete
  14. Six sigma certification 4 November 2020 at 02:31

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

    ReplyDelete
  15. ilander vijay9 January 2021 at 01:16

    Great Article Thanks For Your valuable posting , This is for wonderful sharing,i would like to see more information from your side.i am working in. Electrical system design

    ReplyDelete
  16. John Thompson12 January 2021 at 12:11

    Hi, Your post seems more accurate info and useful. I am John Thompson, I have More Knowledge about Best CRM Software for Independent Insurance Agency & Brokers comprised with Marketing Automation, Analytics, Client & Customer Management System, Email & SMS reminders, AMS, Drip Marketing, Online Google Reviews, Sales Funnel, policy management, Customer retention tools for insurance. Check out this tool might be useful for your insurance agency - Drip Email Campaigns for Insurance | Insurance Marketing Automation

    ReplyDelete
  17. Flora2 February 2021 at 01:40

    Thanks for sharing wonderful information. I loved reading your article.
    use of python programming
    highest paying skills
    scope of hadoop
    hadoop scope in future
    java interview questions and answers for freshers
    selenium interview questions and answers pdf

    ReplyDelete
  18. love back Solution23 February 2021 at 02:55

    Excellent post! Your post is very useful and I felt quite interesting reading it. Expecting more post like this. Thanks for posting such a good post.

    Love back Solution Specialist
    Vashikaran specialist  
    Love Vashikaran Specialist
    Vashikaran Specialist in India  Vashikaran Specialist in Bangalore  Vashikaran Specialist in Mumbai  Love Vashikaran Specialist in MumbaiBlack magic specialist astrologer 

    ReplyDelete
  19. Anonymouse11 March 2021 at 12:13

    The carport is usually a region where you either leave your vehicle or stack your possessions that you would prefer not to keep in your home. someone write my essay for money, The incongruity is that the vast majority of the carports are filled to the edge with a wide range of things that the family has amassed throughout the long term.

    ReplyDelete
  20. Anonymouse11 March 2021 at 12:28

    When the whole substance of your carport are taken out, this is the ideal time for you to go through the things and dispose of the ones that you needn't bother with. There are a huge number of ways you can modify your carport. Pay for Essay Writing, Likewise, what about organizing carport deal and making a couple of bucks on every one of the things you won't utilize once more.

    ReplyDelete
  21. Anonymouse12 March 2021 at 14:40

    It requires some investment and energy to keep your home overall quite spotless. Regardless of whether you are extremely specific with your scouring and tidying, eventually, your home requires more itemized cleaning. lahore car rentals

    ReplyDelete
  22. usman20 March 2021 at 06:14

    https://account-ease.co.uk/accounting-services-for-small-businesses/.
    This is a very helpful article plz read it

    ReplyDelete
  23. usman20 March 2021 at 07:10

    http://www.google.com?url?q=https://account-ease.co.uk/accounting-services-for-small-businesses/.This is a very helpful article plz read it

    ReplyDelete
  24. AlanBarlow24 March 2021 at 23:13

    Thanks for sharing this informative blog. A very useful one will be very helpful for everyone. Do check below and get your custom identity:
    buy logo

    ReplyDelete
  25. Kazi Anwar Saradat10 April 2021 at 00:48

    Thanks For sharing best Tips on You sites The Dgigtal Marketing and Digital Learning
    Both are going on It Digital Learning

    ReplyDelete
  26. Unknown17 April 2021 at 14:29

    Wow thanks so much for this inspiring and motivating article. Bitcoin Private Key Recovery. We guide you on how to recover lost funds in your bitcoin wallet, recover hacked/stolen accounts, spend non-spendable funds and other issues with your block-chain wallets.
    Kindly visit our website by clicking the link below and feel free to give us a message for more information, we are highly recommended and totally safe to work with our English, Indian and American tech wizards world-wide visit us
    at bestbitcoinprivatekeyrecovery.org/
    Or contact us on WhatsApp +1 903 600 570

    ReplyDelete
  27. 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
  28. 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
  29. 먹튀신고6 June 2021 at 02:19

    I've seen articles on the same subject many times, but your writing is the simplest and clearest of them. I will refer to 메이저놀이터추천

    ReplyDelete
  30. Engineering college in AP26 June 2021 at 04:24

    Study Engineering at the best autonomous college in AP with scholarships and full faculty support with high quality education and professional career support.
    https://www.adityatekkali.edu.in/

    ReplyDelete
  31. Miri20 July 2021 at 03:27

    Hey man, when I was younger I also wanted to find a well paid part-time job. I decided to write articles because I was told that I was good at it. I loved it so much so I became a professional writer, so if you need my help you can get essay rewriting service

    ReplyDelete
  32. UnKnown2 August 2021 at 00:48

    Of course, your article is good enough, but I thought it would be much better to see professional photos and videos together. There are articles and photos on these topics on my homepage, so please visit and share your opinions. 토토커뮤니티

    ReplyDelete
  33. VISIT ME9 August 2021 at 00:21

    I wish more authors of this type of content would take the time you did to research and write so well. I am very impressed with your vision and insight 토토

    ReplyDelete
  34. VISIT ME9 August 2021 at 00:21

    Your article looks really adorable, here’s a site link i dropped for you which you may like. 경마사이트

    ReplyDelete
  35. VISIT ME9 August 2021 at 00:21

    I just found this blog and have high hopes for it to continue. Keep up the great work, its hard to find good ones. I have added to my favorites. Thank You. 카지노

    ReplyDelete
  36. VISIT ME9 August 2021 at 00:23

    I precisely needed to thank you so much yet again. I do not know the things I would’ve taken care of without these secrets contributed by you regarding this problem. It seemed to be a very frightful crisis for me, but encountering a new well-written tactic you processed it forced me to jump with contentment. 토토사이트

    ReplyDelete
  37. Vistaar Finance26 August 2021 at 12:27

    Vistaar Finance is one of the best small finance companies in India which provides loans for small businesses. If you are running a small business, consider Vistaar Finance SEM business loan schemes.

    ReplyDelete
  38. shoezone6 September 2021 at 00:29

    While surfing on the internet, I am glad to come across your article. I agree with you... online shoe stores must develop their approach to deliver the exact size and style of the footwear. online shoes stores

    ReplyDelete
  39. 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
  40. Harry11 September 2021 at 11:41

    If you are looking for Rent a Car in Islamabad or Rent a Car Rawalpindi then you are on right place.
    Pakistan Qureshi Tours offer all types of cars for rent

    Rent A Car Islamabad

    ReplyDelete
  41. Haris14 September 2021 at 04:26

    Such a fabulous post and very unique.
    Thanks for sharing it with us.

    Buy law essay

    ReplyDelete
  42. bwin23 October 2021 at 19:24

    온라인카지노 Awesome blog! Is your theme custom made or did you download it from somewhere?
    A theme like yours with a few simple adjustements would really make
    my blog stand out. Please let me know where you
    got your theme. Cheers


    Summer has always been my favorite season. I feel happier.

    ReplyDelete
  43. bwin23 October 2021 at 19:30

    토토사이트 I want to thank you for this excellent read!! I absolutely
    loved every little bit of it. I've got you book-marked to look at new stuff you
    post…


    ReplyDelete
  44. bwin23 October 2021 at 19:33

    스포츠토토 Hi Dear, are you in fact visiting this web site regularly, if so after
    that you will absolutely get nice knowledge.


    ReplyDelete
  45. bwin23 October 2021 at 19:38

    바카라사이트 Woah! I'm really enjoying the template/theme of this
    blog. It's simple, yet effective. A lot of times it's difficult to get that "perfect balance" between user friendliness and appearance.
    I must say you have done a awesome job with this.
    In addition, the blog loads extremely fast for me on Internet
    explorer. Outstanding Blog!

    ReplyDelete
  46. Michael Brooks7 November 2021 at 18:13

    thanks srinivas Javascript marketable skill use it for my business https://www.brooksfashion.com , keep it up

    ReplyDelete
  47. unknown10 November 2021 at 19:08

    Thank you a bunch for sharing this with all of us you actually realize what you are talking about! Bookmarked. Please also seek advice from my site =). We could have a hyperlink change contract between us 안전놀이터


    ReplyDelete
  48. Srinivas Keyonprop11 November 2021 at 02:05

    Nice Blog...!! Thank you for sharing this information.,

    Epitome Integrated City
    Sumadhura Olympus
    SAS Crown
    Ambience Courtyard

    ReplyDelete
  49. unknown25 November 2021 at 19:14

    Succeed! It could be one of the most useful blogs we have ever come across on the subject. Excellent info! I’m also an expert in this topic so I can understand your effort very well. Thanks for the huge help. 안전놀이터


    ReplyDelete
  50. Tipu sheikh15 December 2021 at 09:24


    WHY SHOULD YOU DO A HOME ADDITION
    Our team of construction and remodeling professionals will make an addition to add value to your home in more than just what it can sell for. By substantially boosting the square footage of your house, you also have a larger living space that allows for less stress and a more “live-free” attitude every day of the week. Also, when you are in the process of trying to sell your property, an addition can be a great way to attract competitive buyers, particularly those interested in homes with flexible living spaces.

    It is typically cheaper to produce an addition than to buy a new home with an equivalent amount of space compared to your existing house (after factoring in the home addition). At the very least, the closing costs involved with selling your old house and buying the new house would push this option over the top.
    To know more details: http://gulfcoastdesignbuild.com/

    ReplyDelete
  51. Prosource Dynamics16 December 2021 at 02:03

    Thanks for sharing such kind of knowledgeable article. This will help me alot to build a good website by using codes properly.
    Best SEO Strategies For Your Business

    ReplyDelete
  52. 토토사이트30 December 2021 at 02:13

    I've been troubled for several days with this topic. 슬롯사이트, But by chance looking at your post solved my problem! I will leave my blog, so when would you like to visit it?


    ReplyDelete
  53. alone4 January 2022 at 19:06

    That's a great article! The neatly organized content is good to see. Can I quote a blog and write it on my blog? My blog has a variety of communities including these articles. Would you like to visit me later? keo nhacai


    ReplyDelete
  54. Packers Movers Meerut22 January 2022 at 07:23

    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
  55. alone22 January 2022 at 20:14

    Your writing is perfect and complete. However, I think it will be more wonderful if your post includes additional topics that I am thinking of. I have a lot of posts on my site similar to your topic. Would you like to visit once? keonha cai

    ReplyDelete
  56. sportstotohot.com28 January 2022 at 11:56

    This article presents clear idea designed for the new visitors of blogging, that in fact how to do blogging and site-building. 토토

    ReplyDelete
  57. racesite.pro28 January 2022 at 12:01

    I appreciate your post thanks for sharing the information. 경마사이트

    ReplyDelete
  58. reelgame.site28 January 2022 at 12:07

    This article is an appealing wealth of informative data that is interesting and well-written. 파친코사이트

    ReplyDelete
  59. totosite365.info28 January 2022 at 12:15

    Thank you for any other informative blog. 토토사이트

    ReplyDelete
  60. Unknown1 February 2022 at 19:27

    It’s always a pleasure to read your magnificent articles on this site. You are among the top writers of this generation, and there’s nothing you can do that will change my opinion on that. My friends will soon realize how good you are. Feel free to visit my website;
    야설

    ReplyDelete
  61. Unknown1 February 2022 at 19:27

    Hi there, after reading this remarkable paragraph i am too happy to share my experience here with friends. Feel free to visit my website;
    한국야동


    ReplyDelete
  62. Unknown1 February 2022 at 19:28

    So informative things are provided here,I really happy to read this post,I was just imagine about it and you provided me the correct information I really bookmark it,for further . Feel free to visit my website; 국산야동

    ReplyDelete
  63. Unknown1 February 2022 at 19:28

    You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers. Feel free to visit my website;
    일본야동

    ReplyDelete
  64. Unknown1 February 2022 at 19:29

    It’s exceptionally useful and you are clearly extremely proficient around there. Appreciate it for your efforts. Feel free to visit my website; 야설
    일본야동
    국산야동
    일본야동
    국산야동



    ReplyDelete
  65. badugisitenet19 February 2022 at 09:26

    Wonderful post with amazing article. I was so impressed to yours. 바둑이게임

    ReplyDelete
  66. Unknown24 February 2022 at 23:05

    Extremely decent blog and articles. I am realy extremely glad to visit your blog. Presently I am discovered which I really need. I check your blog regular and attempt to take in something from your blog. Much obliged to you and sitting tight for your new post.메이저사이트모음

    ReplyDelete
  67. Allie9 April 2022 at 11:24

    This post is really amazing. thank you creating this post and sharing. well-done dear..
    https://alliedtechnologies.io/

    ReplyDelete
  68. Allie9 April 2022 at 11:25

    I am really astonished. thankful for sharing this amazing post.

    ReplyDelete
  69. Servis Shoes14 November 2022 at 07:25

    Welcome to Servis Online Official Store! Buy men formal shoes in all sizes with different colors at reasonable Prices. We deliver a product on COD in all Metro cities like Lahore, Karachi, Islamabad across Pakistan.

    ReplyDelete

Subscribe to: Post Comments (Atom)

Blogroll

Popular Posts