I am building an apartment renting app in React, with very limited Javascript and programmatic knowledge (using this app to learn while i go). I've stumbled upon a big roadblock trying to build the filter functionality.

Here is the code for the FilterContainer.js container component

const FilterContainer = React.createClass({
render () {
    return (
        

            
             900kn']} />
            
             80m']} />
        
    )
}});

This is the Filter.js component

var Filter = React.createClass({
getDefaultProps() {
    return {
        filterList: [],
        name: ''
    };
},
render() {
    var handleClick = function(i, props) {
        console.log('You clicked: ' + props.filterList[i].listValue[i]);
    }
    return (
        

            
{this.props.name}
            

                {this.props.filterList.map(function(listValue, i, props) {
                    return 
{listValue}
;
                }, this)} {/* this at the end to fix the scope issue from global to local */}
            
        
    )
}});

This is how the Filter looks on the website atm

The error I am getting is "Filter.js:13 Uncaught TypeError: Cannot read property '0' of undefined" whenever i click on one of the filter items, I want to be able to save the name of the filter item as data which I will use to filter the apartments.

So the simple issue is the undefined error. The more complex issue i have is the fact that I have no idea how to build the filter functionality in my app, so if any of you guys could point me in the right direction it would help me alot.