Hide content dynamically with React

Question

I want to dynamically hide elements when they are irrelevant.

This should only apply to tags with "taglevel" above 1.

For example, if I click on "books", it should only show "adventures" and "classics." It will hide the blockbuster tag, since no books belong to the blockbuster.

This screenshot should make it clearer:

I thought I could do this by matching booleans. Instead of passing the level and all categories, you simply pass the list of categories to display, and then specify this list in PhotoGallery for each level

I am open to any way to do this.

I put the code in this code:

http://codepen.io/yarnball/pen/GjwxQq

Here is an example of where I take the tag level:

var PhotoGalleryLevel = React.createClass({
  render: function () {
    var getCategoriesForLevel = this.props.displayedCategories.some(function (tag) {
      return tag.taglevel === this.props.level;
    }.bind(this));

    /* Write method here that takes the level as an argument and returns the filtered list?*/
    /*displayedCategories={this.state.getCategoriesForLevel(1)}
    displayedCategories={this.getCategoriesForLevel(1)}
    */

    var filteredTags = this.props.tags.filter(function (tag) {
      return tag.taglevel === this.props.level;
    }.bind(this));
    var disabled = this.props.displayedCategories.some(function (tag) {
      return tag.taglevel === this.props.level;
    }.bind(this));
    return (
      <div>
        {filteredTags.map(function (tag, index){
          return <PhotoGalleryButton key={index} tag={tag} selectTag={this.props.selectTag} disabled={disabled} />;
        }.bind(this))}
      </div>
    );
  }
});

EG JSON:

   "title": "Into the Wild",
    "tag": [
        {
            "name": "Movie",
            "taglevel": 1,
            "id": 1
        },
        {
            "name": "Adventure",
            "taglevel": 2,
            "id": 30
        },
        {
            "name": "Classic",
            "taglevel": 1,
            "id": 2
        }
    ],
    "info": []
}

Answer 1

schneider : http://codepen.io/anon/pen/EgOqwj?editors=0010

, uniqueCategories , :

this.setState({
      uniqueCategories: this.getUniqueCategories(PHOTODATA, newCategories),
      displayedCategories: newCategories,
    });

getUniqueCategories, :

(!display.length || !displayFiltered.length || 
  displayFiltered
    .some(function(t) { 
        return arr.filter(function(tc) { 
          return tc.taglevel === t.taglevel;
        })
        .some(function(tc) {
          return t.id === tc.id;
        });
    }))

, ,