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>

Answer 2

Datalists work fine in React, but you must close each option tag (with a backslash at the end).

<option value="something" />

Answer 3

It takes a little change to make MDN datalist example works in React.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

<label>
    Choose a browser from this list:
    <input list="browsers" name="myBrowser" />  
</label>   
<datalist id="browsers">
    <option value="Chrome" />
    <option value="Firefox" />
    <option value="Internet Explorer" />
    <option value="Opera" />
    <option value="Safari" />
    <option value="Microsoft Edge" />   
</datalist>