           {queryTerms.map(function(term, index) {
             return (
               <CwbMultiwordTerm
+                key={this.state.queryTermIds[index]}
                 term={term}
                 termIndex={index}
                 queryHasSingleTerm={this.state.queryTerms.length === 1}

  handleAddTerm: ->
    queryTerms = @state.queryTerms
    queryTerms.push(createTerm())
    @props.handleQueryChanged(@constructCQPQuery(queryTerms))


  handleRemoveTerm: (termIndex) ->
    queryTerms = @state.queryTerms
    queryTerms.splice(termIndex, 1)
    @props.handleQueryChanged(@constructCQPQuery(queryTerms))



#= require ./cwb_multiword_term

###* @jsx React.DOM ###

# This will be used to create a unique ID for each query term component.
# React wants a unique key for each component in a sequence, such as the set
# of search inputs in the multiword interface, and it will mess up the text
# in the search boxes when we remove a term from the query if we don't provide this.
# Normally, the items in a list have some kind of database ID that we can use,
# but query terms don't. Also, we cannot just use a hash code created from the
# queryTerm object, since we may have several identical terms in a query.
# Thus, in getInitialState() we create a list (called queryTermIds) containing a
# unique ID number for each term in the initial query (i.e., the
# one provided in the props when this component is mounted), and then we add a newly
# created ID when adding a query term in the multiword interface and remove the
# terms ID from the list when a term is removed. This is the kind of ugly state
# manipulation that React normally saves us from, but in cases like this it seems
# unavoidable...
lastQueryTermId = 0

createTerm = (overrides = {}) ->
  term =
