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

11 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

Blogroll

Follow this blog by Email

Popular Posts