Элементы формы и связанные надписи

Question

Как сделать связанные метки для элементов формы в коде ниже?

render() {
return (
  <section className="col">
    <div className="input-group">
      <input type="text" 
      id="search-input" 
      ref="searchInput" 
      className="form-control" 
      placeholder="Filter location..." 
      onChange={this.handleChange} />
      <span className="input-group-addon">Filter</span>
    </div>
  </section>
)
}

Answer 1

Использовать ниже.

<section className="col">
    <div className="input-group">
      <label for="search-input">Filter</label>
      <input type="text" 
      id="search-input" 
      ref="searchInput" 
      className="form-control" 
      placeholder="Filter location..." 
      onChange={this.handleChange} />
    </div>
  </section>

Создать метку и присвоить идентификаторы элементов ввода меткам для атрибута