React js. Перезагрузка свойства элемента

начал изучать React js. Сделал компонент, чтобы он выводился и чтобы при вводе в инпут у меня запускалась функция js.

Код:

class Lable extends React.Component {
render() {
return (
    <input
      type="text"
      id={this.props.id}
      placeholder="&nbsp;"
      onChange={this.handleChange.bind(this)}
    />
);
}
handleChange(e) {
  this.props.onSearch(e.target.id);
}
}
ReactDOM.render(
<p className="inp">
  <label>
  <Lable name="1" id="roadFrom" onSearch={search} />
  <span className="label" />
  <span className="border" />
  </label>
</p>,
document.getElementById("root")
);

И кусок кода функции search, она выполняет автозаполнение импута, то есть, ввожу первые буквы и она выводит список и тд, живой поиск.

function search(name) {
var field = document.getElementById(name);
var classInactive = "sf_inactive";
var classActive = "sf_active";
var classText = "sf_text";
var classSuggestion = "sf_suggestion";
field.c = field.className;
field.className = field.c + " " + classInactive;
field.onfocus = function() {      
  this.className = this.c + " " + classActive;
  this.value = this.value == "" ? "" : this.value;
};
field.onblur = function() {
  this.className =
    this.value != ""
      ? this.c + " " + classText
      : this.c + " " + classInactive;
  this.value = this.value != "" ? this.value : "";
  clearList();
};
if (suggestion) {
  var selectedIndex = 0;
  field.setAttribute("autocomplete", "off");
  var div = document.createElement("div");
  var list = document.createElement("ul");
  list.style.display = "none";
  div.className = classSuggestion;
  list.style.width = field.offsetWidth + "px";
  div.appendChild(list);
  field.parentNode.appendChild(div);
 }

Я ее естественно сократил, чтобы не захламлять. У меня проблема в том, что при вводе символа в инпут у меня список выпадает, класс к инпуту "sf_inactive" клеится, но когда я ввожу второй символ, у меня div не перезаписывается а приклеивается новый снизу, естественно у меня за новым списком висит старый и класс "sf_inactive" снова клеится к инпуту

Вот что получается:

<input type="text" id="roadFrom" placeholder="&nbsp;" class=" sf_inactive sf_inactive sf_inactive sf_text" autocomplete="off">

Вот у меня тут аж три раза sf_inactive sf_inactive sf_inactive, так как три зара клацал на кнопку и приклеено три div'a

<div class="sf_suggestion"><ul tabindex="-1" style="display: block; width: 
280px;"><li><a href="javascript:void(0);">sfsf</a></li></ul></div>
<div class="sf_suggestion"><ul tabindex="-1" style="display: block; width: 
280px;"><li><a href="javascript:void(0);">sfsf</a></li></ul></div>
<div class="sf_suggestion"><ul tabindex="-1" style="display: block; width: 
280px;"><li><a href="javascript:void(0);">sfsf</a></li></ul></div>

Если это делать не через react, а просто на странице, то все работает корректно, добавляется один класс, и один див, который постоянно меняется.

Как в react это можно исправить? :(