MusicApp.js

function Dropdown({title, value, options, optionKey, optionVal, onChange}) {
  if(values === undefined && values === null) {
    return <div>No data</div>;
  }
  return <div>
    <label>{title}:</label>
    <select value={value || -1} onChange={onChange}>
      <option key={-1} value={-1}>All</option>
      {values.map(function (val, idx) {
        return <option key={idx} value={val[optionKey]}>{val[optionVal]}</option>
      })}
    </select>
  </div>;
}

var MusicFilters = React.createClass({
    getDefaultProps: function() {
        return {
            defaultLoadParameters : {}
        }
    },

    getInitialState: function() {
        return {
            , genresFound: this.props.genresFound
            , musics: this.props.musics
            , selected: {
                  performerID: this.props.performerID
                , musicID: this.props.musicID
                , albumID: this.props.albumID
                , composerID: this.props.composerID
                , castID: this.props.castID
            }
        }
    },

    render: function() {
      if(this.state.genres === undefined && this.state.genres === null) {
        return <div>No data</div>;
      }
      
      var selected = this.state.selected;

      return <div>
        <div className="genres">
          <div style={{"font-weight":"bold"}}>Genres:</div>
          {this.state.genres.map(function (val, idx) {
            return <div key={idx}>
              <input checked={this.isGenreSelected(val)} type="checkbox" name={val["GenreID"]} onChange={this.onGenreChanged.bind(this)}/>
              <span>{val["Genre"]}</span>
             </div>
          }, this)}
        </div>
        <div className="selects">
          <Dropdown title="Performers" name="performerId" optionKey="performerId" optionVal="performer" options={this.props.performers} value={selected.performerID} />
          <Dropdown title="Composers" name="composerId" optionKey="composerId" optionVal="composer" options={this.props.composers} value={selected.composerID} />
          <Dropdown title="Albums" name="albumId" optionKey="albumId" optionVal="album" options={this.props.albums} value={selected.albumID} />
          <Dropdown title="Casts" name="castId" optionKey="castId" optionVal="cast" options={this.props.casts} value={selected.castId} />
        </div>
        <div className="musicContainer">
          <label>Musics:</label>
          <div>
            {this.state.musics.map(function (val, idx) {
              return <p>{val["Music"]}</p>;
            })}
          </div>
        </div>
      </div>;
    },

// end of lifetime methods
//////
      
    onGenreChanged: function(event) {
      var genresFound = this.state.genresFound.slice();
      var currentGenre = event.target.name;
      if(event.target.checked) {
        genresFound.push(currentGenre)
      } else {
        genresFound = genresFound.filter(function(genre) {
          return genre !== currentGenre
        })
      }
      this.setState({genresFound: genresFound});
    },

    onFilterChanged: function(event) {
        var selected = Object.assign({}, this.state.selected);
        selected[event.target.name] = event.target.value
        this.setState({selected: selected});
    }

    setStateAndTriggerLoad: function(newState) {
      this.setState(newState);
      music.reLoadDetailsAndFilters({
        genreIDs: this.state.genresFound,
        performerID: this.state.selected.performerID,
        albumID: this.state.selected.albumID,
        composerID: this.state.selected.composerID,
        castID: this.state.selected.castID
      });
    }

});