import Switch, { Item } from 'react-switchable';
import 'react-switchable/dist/main.css'

<Switch 
  name="temperature"
  onItemChanged={newValue => console.log('The new value is => ', newValue)}>
  <Item value='Hot'>
    Hot
  </Item>
  <Item value='Cold'>
    Cold
  </Item>
</Switch>

import Switch, { Item } from 'react-switchable';
import 'react-switchable/dist/main.css'

<div>
  <h1>What is the capital of Venezuela ?</h1>
  <Switch
    name="countries"
    onItemChanged={capital => checkAnswer(capital)}>
    <Item value='London'>
      London
    </Item>
    <Item value='Caracas'>
      Caracas
    </Item>
    <Item value='Lagos'>
      Lagos
    </Item>
    <Item value='Beijing'>
      Beijing
    </Item>
    <Item value='Moscow'>
      Moscow
    </Item>
  </Switch>
</div>

class App extends React.Commponent {
  state = {
    selectedCountryIndex: 1,
    countries: [
      { value: "Russia" },
      { value: "Nigeria" },
      { value: "Venezuela" },
      { value: "France" }
    ]
  }

  render() {
    return (
      <Switch
        name="countries"
        onItemSelected={(selectedIndex) => {
          this.setState({
            selectedCountryIndex: selectedIndex
          })
        }}
      >
        {countries.map((country, index) => (
          <Item 
            key={country.value} 
            active={index === selectedCountryIndex} 
            value={country.value}>
              {country.value}
          </Item>
        ))}
      </Switch>
    )
  }
}

class App extends React.Commponent {
  state = {
    selectedCountry: "Nigeria"
  }

  render() {
    return (
      <Switch
        name="countries"
        onItemChanged={country =>this.setState({ selectedCountry: country })}>
        <Item value="Russia">Russia</Item>
        <Item default value="Nigeria">
          Nigeria
        </Item>
        <Item value="Venezuela"> Venezuela </Item>
        <Item value="France"> France </Item>
      </Switch>
    )
  }
}