Trying to create search function (React)


I currently have a page of athletes / students for which a coach can sort through them using a search. However, when using the search right now I’m getting undefined for my reactive variable. Currently, I’m creating those variables inside my container, the following is a piece of my container (searchQuery and searching are being returned):

  export default createContainer(() => {

  let searchQuery = new ReactiveVar();
  let searching = new ReactiveVar(false);

  //const handle = Meteor.subscribe("students");

  const handle = Meteor.subscribe( 'students', searchQuery.get(), () => {
      setTimeout( () => {
        searching.set( false );
      }, 300 );

Here is the publication:

Meteor.publish("students", function(search) {

  let query = {},
  projection = {limit: 10, sort: {firstname: 1}};
    let regex = new RegExp(search, 'i');

    query = {
      $or: [
        {firstname: regex},
        {lastname: regex}

    projection.limit = 100;

  return StudentDataCoach.find(query, projection);

Finally, here is the search component:

export default class Search extends React.Component{

    let value =;
    if(value !== '' && e.keyCode === 13){

    if(value === ''){

        <input type="text" name="search" placeholder="Find a student.." onKeyUp={} ref="search"/>

Here is the repo: GitHub Repo


bumping up as I would like to know how this works too.


Take a look at his linked to github repo - the issue was likely caused by defining his ReactiveVar’s within the createContainer function, which means that every time createContainer ran his ReactiveVar’s were clobbered/reset. His source repo now has them properly defined outside of createContainer, in his manageStudents container.


hwilson is correct. I was able to fix the issue by moving the reactive variables outside the createContainer function.