More React with Coffee

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<div id="typetest">

</div>

CoffeeScript

R = React.DOM

nations = ['britain', 'ireland', 'norway', 'sweden', 'denmark', 'germany',
  'holland', 'belgium', 'france', 'spain', 'portugal', 'italy', 'switzerland']

Typeahead = React.createClass
  getInitialState : -> {input: ""}
  handleChange    : -> @setState input: @refs.field.getDOMNode().value
  handleClick     : (nation)-> @setState input: nation
  matches         : (input)->
    regex = new RegExp(input, "i")
    _.select nations, (nation)-> nation.match(regex) && nation != input
  render: ->
    R.div {},
      R.input {ref:'field', onChange: @handleChange, value: @state.input}
      R.br {}
      _.map @matches(@state.input), (nation)=>
        Button {handleClick: @handleClick, name: nation}

Button = React.createClass
  onClick: -> @props.handleClick(@props.name)
  render:  ->
    classes = "btn btn-xs btn-default"
    R.button {className: classes, onClick: @onClick}, @props.name

$(document).ready ->
  React.render React.createFactory(Typeahead)(), $('#typetest')[0]