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:

16 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

Subscribe to: Post Comments (Atom)

Blogroll

Follow this blog by Email

Popular Posts