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>
    )
  }
}

38 comments:

  1. 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. Thanks for sharing The Awesome content. I will also share with my friends. Great Content thanks a lot.
    http://maherleathers.com

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

    ReplyDelete
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. https://account-ease.co.uk/accounting-services-for-small-businesses/.
    This is a very helpful article plz read it

    ReplyDelete
  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
  11. 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
  12. Thanks For sharing best Tips on You sites The Dgigtal Marketing and Digital Learning
    Both are going on It Digital Learning

    ReplyDelete
  13. 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
  14. 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
  15. 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
  16. Such a fabulous post and very unique.
    Thanks for sharing it with us.

    Buy law essay

    ReplyDelete
  17. ์˜จ๋ผ์ธ์นด์ง€๋…ธ 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
  18. thanks srinivas Javascript marketable skill use it for my business https://www.brooksfashion.com , keep it up

    ReplyDelete
  19. 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
  20. 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
  21. 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
  22. I appreciate your post thanks for sharing the information. ๊ฒฝ๋งˆ์‚ฌ์ดํŠธ

    ReplyDelete
  23. This article is an appealing wealth of informative data that is interesting and well-written. ํŒŒ์นœ์ฝ”์‚ฌ์ดํŠธ

    ReplyDelete
  24. 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
  25. 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
  26. 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
  27. 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
  28. It’s exceptionally useful and you are clearly extremely proficient around there. Appreciate it for your efforts. Feel free to visit my website; ์•ผ์„ค
    ์ผ๋ณธ์•ผ๋™
    ๊ตญ์‚ฐ์•ผ๋™
    ์ผ๋ณธ์•ผ๋™
    ๊ตญ์‚ฐ์•ผ๋™



    ReplyDelete
  29. Wonderful post with amazing article. I was so impressed to yours. ๋ฐ”๋‘‘์ด๊ฒŒ์ž„

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

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

    ReplyDelete
  32. 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
  33. Extremely decent blog and articles.slot5000

    ReplyDelete

Blogroll

Popular Posts