Does React.js support HTML5 datalist?

user_2951933 0
Viewed 30606

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.

html-datalist reactjs html javascript
5 Answers

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

<option value="something" />
user_32786540

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>
user_58274500

This works fine with me using useRef hook; using the useState kinda have slow issue.

<input type="text" ref={item_name_ref} onClick={(e)=>{item_name_ref.current.value=""}}  defaultValue = {props.selectedRecord.item_name} list="item_name_list"/>
<datalist id="item_name_list">
    {  
        productsName.map((item,index)=>{
          return  <option key={uuid()} value={item.item_name} />;
        })
    }
</datalist>

then I can grab the result in

const handleClick=()=>{ alert(item_name.current.value)}
user_119507180

Properly closing the option tag won't throw any error.

<input list="browsers">

// Not working code
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
</datalist>

//Working Code
<datalist id="browsers">
  <option value="Internet Explorer" />
  <option value="Firefox" />
</datalist>
user_57699860
Related