reactjs filter

gistfile1.js

var Data = {
    title: 'Member State',
    row: [{
        state: 'S',
        qText: 'Europe'
    },{
        state: 'S',
        qText: 'Asia'
    },{
        state: 'S',
        qText: 'Africa'
    }]
};

var Item = React.createClass({
    render: function() {
        return <li>{this.props.item.qText}</li>;
    }
});

var FilterItems = React.createClass({
    show: function() {

    },
    render: function() {
        return <div className={'items'}>
        <ul>
            {this.props.items.map(function(item, i) {
                return <Item item = {item} />;
            })}
        </ul>
        </div>;
    }
});

var Title = React.createClass({
    render: function() {
        return <div className={'title'}>
          {this.props.data.title}
          <div className={'right'}>
            <div className={'count'}> 1 of 4 </div>
            <img src={'img/toggle.svg'} />
          </div>
        </div>

    }
})


var Filter = React.createClass({
    getInitialState: function() {
        return {
            listVisible: false
        };
    },
    show: function() {
        this.setState({ listVisible: true });
        document.addEventListener("click", this.hide);
    },

    hide: function() {
        this.setState({ listVisible: false });
        document.removeEventListener("click", this.hide);
    },
    render: function() {
        return <div className={'filter ' + (this.state.listVisible ? 'expanded' : '')} onClick={this.show}>
        <Title data={this.props.data} />
        <FilterItems items={this.props.data.row} />
        </div>;
    }
});

React.render(<Filter data={Data} />, document.getElementById("filter-container"));