Does React.js support HTML5 datalist?

Question

I'm trying to implement HTML5 datalist element in a easiest possible way.

Something like this:

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

This does not work however. What would be my next step without having to install (npm) additional stuff.

Basically, I'm using the plain input react element and want to embed the datalist.

Here is my react code:

    <input className={"custom_input inline "+this.isValidInteger(this.props.price.price_first,0,2000000)} 
    style={{marginRight:'5px'}} 
    value={this.props.price.price_first || ''} type="text"
    onChange={(e)=>this.props.dispatch({type:"price", payload:e.target.value})} 
    placeholder=" Unesite..." 
    maxLength="10"/>

So I would like a dropdown on top of that.

Answer 1

I'm currently using the html5 datalist in react without issues.

Here goes the implementation:

<input type="text" list="data" onChange={this._onChange} />

  <datalist id="data">
    {this.state.data.map((item, key) =>
      <option key={key} value={item.displayValue} />
    )}
  </datalist>