Select Usages

select_basic_usage.jsx

import React from 'react';
import { Select } from 'uniform';

const selectOptions = [
  { label: 'Luke Sywalker', value: 'lukeSkywalker' },
  { label: 'Han Solo', value: 'hanSolo' },
  { label: 'Jar Jar Binks', value: 'jarJarBinks'},
];

class SomeForm extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      favStarwarsCharacter: null,
    };
  }
  
  render() {
    return (
      <Select
        name="fav-star-wars-character"
        qaId="qa-fav-star-wars-character"
        id="fav-star-wars-character-select"
        options={selectOptions}
        placeholder="Select your favorite Star Wars character"
        value={this.state.favStarwarsCharacter}
        onChange={selectedCharacter => this.setState({favStarwarsCharacter: selectedCharacter.value})}
      />
    );
  }
}