Select list gets empty on state change

I am developing a SPA which has some filters. I am able to add the select list and on change event I am updating the state of the react application.

States

this.state = { genres: null , categories: null , fBooks: [] , gBooks: [] };

React tags

<Select
    name="genre"
    value=""
    options={this.state.genres}
    onChange={logChange}
/>
<Select
    name="category"
    value=""
    options={this.state.categories}
    multi={true}
    onChange={logChange}
/>

logChange

var logChange = (function(val) {
      filterBooks(val.split(','));
    }).bind(this);

and the filterBooks method

var filterBooks = (function(val){
      var selected = [];

      _.filter(this.state.gBooks, function (item) {
        if(_.contains(val, item.genre.name) === true){  
            selected.push(item);
        }
      });
        this.setState({fBooks: selected});
        console.log(selected);

    }).bind(this);

When the select list is first changed, the item are filtered correctly but when I select another option the select list changes to blank. Visuals might help better.

This only happens when I change the state to re-render the list this.setState({fBooks: selected}); Otherwise it works fine.

[jonathanasquier]

I’m using redux-form and the onBlur event used to dispatch empty values which is quite ennoying. I’ts ugly but it works (1.0.0-beta6):

<Select
     options={options}
    {...field}
     onBlur={function(){}}
 />

[Lothiraldan]

I have the same problem and you should separate the Select tag in a isolated component which will render only if the options props changed.

Something like:

class JobRunForm extends React.Component {

    shouldComponentUpdate = (nextProps, nextState, nextContext) => {
        return !(nextProps == this.props) ||
          !(nextState == this.state) ||
          !(nextContext == this.context);
    }

    render() {
      return (
        <form className="form-horizontal style-form">
              <Select
                  name="form-matcher-name"
                  options={this.props.matchers}
                  onChange={this.props.onChange}
                  searchable={true}
                  placeholder={'Glob'}
              />
       </form>
     )

The onChange props is passed by the parent and it will change the parent state without re-rendering the JobRunForm.

If you don’t need the allowCreate, you should try the beta version, it solves the problem more elegantly.