CODEWITHSUNDEEP
reactjshtml-datalist
aarkerio
aarkerio

Reputation: 2354

Changing the options in a Datalist with reactJS

I'm trying to update the values in a Datalist when the user type in the input text field, I'm kind of newbie with ReactJS, I tried this code but it is not working: 

var MyList = React.createClass({
getInitialState: function() {
    return {
        options: [<option key={'taste'} value={'zeitwert'}>{'Name'}</option>]
    }
},
changeHandler: function(e) {
    console.log('In changeHandler');
    this.state.options.push(
      <option key={'some_key2'} value={'some_value2'}>{'Second Option'}</option>,
      <option key={'some_key3'} value={'some_value3'}>{'Third Option'}</option>
      );
},
render: function() {
    return (
      <div>
        <input type="text" className="form-control" onChange={this.changeHandler} placeholder="Owner" list="slist" name="owner_id" />
        <datalist id="slist">{this.state.options}</datalist>
      </div>
    )
}

});

I'm not getting any error message and the console.log line works fine, but the Second and Third options don't appear in the list.

What I'm doing wrong? thx!

UPDATE

This code works:

  changeHandler: function(e) {
    console.log('In changeHandler');
    tmp = [];
    tmp.push(
      <option key={'some_key2'} value={'some_value2'}>{'Second Option'}</option>,
      <option key={'some_key3'} value={'some_value3'}>{'Third Option'}</option>
      );
    this.setState({options: tmp});
   },

Thanks Ilya!

Upvotes: 0

Views: 5765

Answers (2)

Abhishek Kumawat
Abhishek Kumawat

Reputation: 808

I managed to use datalist like select via react-html-datalist

Upvotes: 0

escargot agile
escargot agile

Reputation: 22379

Just changing the state won't trigger a UI update. You need to tell React that the state has changed by calling setState or other functions described here: https://facebook.github.io/react/docs/component-api.html

Upvotes: 3

Related Questions