How to build a filter function using Meteor and React

I’ve been building my first web platform using Meteor and React.

At the moment I have a database that contains the information that users can submit. We have three different chapters and each chapter contains several artists that people can use to link their information to.

My question:

How can I build a filter system with Meteor and React so I can filter the information that has been uploaded by the user based on what type of content it is or who this content is linked to.

At the moment I gather my information from the database with this file:

import { composeWithTracker } from ‘react-komposer’;
import { Comments } from ‘…/…/api/comments/comments’;
import CommentsListBeijing from ‘…/components/beijing/comments-list-beijing’;
import { Loading } from ‘…/components/loading’;
import { Meteor } from ‘meteor/meteor’;

const composer = (props, onData) => {
const subscription = Meteor.subscribe(‘comments’);
if (subscription.ready()) {
const comments = Comments.find({approved: true, city: ‘Beijing’ }, {sort: {timestamp: 1}}).fetch();
onData(null, { comments });
}
};

export default composeWithTracker(composer, Loading)(CommentsListBeijing);

At the moment I have a file like this for every chapter. (Which I know is not ideal, but as I said, my first project)

So if instead of just loading all of the information all of the time, how can instead add buttons or fields on my main page so I can load different information into the composer?

I add the information on the main page like this:

import React from ‘react’;
import ReactPlayer from ‘react-player’;
import CommentsListBeijing from ‘…/containers/comments-list-beijing’;
import { SparkModalBeijing } from “…/components/beijing/spark-modal-beijing”;
import Fullscreen from ‘react-fullscreen’;

class Beijing extends React.Component {
constructor(props){
super(props);

	this.stopVideo = this.stopVideo.bind(this);
	this.playVideo = this.playVideo.bind(this);
	this.onSeek = this.onSeek.bind(this);

	this.state = {
		playing: true,
		timestamp: 0,
	}
}

duration = null
onDuration = duration => {
	this.duration = duration
}
onProgress = progress => {
	if (this.duration && progress.played > 1 / this.duration) {
		const timestamp = parseInt(progress.played * this.duration);
		this.setState({ timestamp })
		console.log(timestamp);
	}
}

onSeek (e) {
    const fraction =  parseFloat(e.target.value)
    const newFraction = fraction / this.duration
    this.refs.player.seekTo(newFraction)
}