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

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

    ReplyDelete
  4. 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
  5. Thank you for this informative post

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

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

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

    ReplyDelete
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. Your article looks really adorable, here’s a site link i dropped for you which you may like. 경마사이트

    ReplyDelete
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. Such a fabulous post and very unique.
    Thanks for sharing it with us.

    Buy law essay

    ReplyDelete

Blogroll

Popular Posts