Simple react filtering

Question

I'm trying to use basic filtering with React. All my "tags" have "taglevel".

• I want the first row to show all tag.name with "taglevel" of 1.

• I want the second row to show all tag.name with "taglevel" of 2 or more.

However, I cannot get it to filter on it on "nested" content in my json.

I can get the "titles" in and filtering, but I would like to filter on the nested json content tag.name.

I've put this together in a codepen.

http://codepen.io/yarnball/pen/GqbyWr?editors=1010

Without success, I have now tried the following:

I tried filtering using this using:

var LevelFilter = React.createClass({

    render: function(){
        return this.props.tags.filter(tag => tag.taglevel === this.props.targetLevel).map(tag => <a onClick={this.props.onClick}>{tag.name}</a>);
    }
});

Then trying to get it in my return here:

render: function(){
        var buttonClass = this.state.active ? 'active' : '';
        var titleToSelect = this.selecttitle;
        var getUniqueCategories=[];
        PHOTODATA.forEach(function(el){
            if(getUniqueCategories.indexOf(el.title) === -1 ) getUniqueCategories.push(el.title);
        })

        return (
            <div className="overlay-photogallery">
                <div className="filter-panel"><b>Tags with taglevel 1 only (not title!)</b>
                    {
                        getUniqueCategories.map(function(el,i){
                            var boundClick = titleToSelect.bind(null,el);
                            return <LevelFilter onClick={onClick} targetLevel={1}/>
                        })

                    }  

Here is a sample of my json:

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

Answer 1

Could be something like this:

var Level1filter = React.createClass({

    render: function(){
        return this.props.tags.filter(tag => tag.taglevel === 1).map(tag => <a onClick={this.props.onClick}>{tag.name}</a>);
    }
});

var Level2filter = React.createClass({

    render: function(){
        return this.props.tags.filter(tag => tag.taglevel === 2).map(tag => <a onClick={this.props.onClick}>{tag.name}</a>);
    }
});

now, maybe make something better:

var LevelFilter = React.createClass({

    render: function(){
        return this.props.tags.filter(tag => tag.taglevel === this.props.targetLevel).map(tag => <a onClick={this.props.onClick}>{tag.name}</a>);
    }
});

//and use it like this
<LevelFilter onClick={onClick} targetLevel={1}/>
<LevelFilter onClick={onClick} targetLevel={2}/>

Arrow Function in case you're not familiar with it: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions