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:

31 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

Subscribe to: Post Comments (Atom)

Blogroll

Follow this blog by Email

Popular Posts