CODEWITHSUNDEEP
javascriptreactjs
Ycon
Ycon

Reputation: 1950

Hide content dynamically with React

I want to dynamically hide items when they are irrelevant.

This should only apply for tags with a "taglevel" above 1.

For example, if I click "books" it should only show "adventure" and "classic". It will hide the tag "blockbuster" as no "books" belong to "blockbuster".

This screenshot should make it clearer: enter image description here

I thought I could do this by mapping booleans. Instead of passing a level and all of the categories you'll just pass a list of categories to display, then give that list in PhotoGallery for each level

I am open to any way of doing this.

I've put the code in this codepen:

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

Here's a sample 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 of JSON data:

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

Upvotes: 4

Views: 201

Answers (1)

Johnny Bravo
Johnny Bravo

Reputation: 26

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

the idea is to generate new uniqueCategories every time you click on a tag:

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

now you have getUniqueCategories function and I've added this:

(!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;
        });
    }))

its not clean but i've followed your pattern using filter and some functions

Upvotes: 1

Related Questions