Reactでコンテンツを動的に非表示にする

Question

無関係のアイテムを動的に非表示にしたい。私は「本」をクリックした場合にのみ例えば1

の上に「taglevel」でタグを申請してください

、それが唯一の「冒険」を示し、「古典的な」すべきです。 「書籍」は「ブロックバスター」に属していないので、タグ「ブロックバスター」を隠すことになります。

このスクリーンショットは、それをより明確にする必要があります

は私がブール値をマッピングすることによってこれを行うことができると思いました。レベルとすべてのカテゴリを渡す代わりに、表示するカテゴリのリストを渡すだけで、各レベルのPhotoGalleryでそのリストを与えます。

私はこれを行う方法は何もありません。

私はこのcodepenでコードを入れている：

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

は、ここで私は、タグのレベルを取る場所のサンプルです：JSONデータの

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：

"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

シュナイダーここに：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; 
     }); 
    })) 

そのクリーンしかし、私ではありませんフィルターといくつかの機能を使用してあなたのパターンに従ってください