Containers throwing warnings, but works fine. Looking to understand what error is? [Solved]

#1

Hi,

I’m getting s strange error after upgrading to react-komposer 2, like below. What I’m trying to do is fairly simple, just following https://github.com/arunoda/react-komposer#migrating-from-1x

Anyone have ideas?

What does Functions are not valid as a React child. mean? Thanks so much.

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    in Container(Admins) (created by Container(Container(Admins)))
    in Container(Container(Admins)) (created by Container(Container(Container(Admins))))
    in Container(Container(Container(Admins))) (created by Container(Container(Container(Container(Admins)))))
    in Container(Container(Container(Container(Admins)))) (created by Container(Container(Container(Container(Container(Admins))))))
    in Container(Container(Container(Container(Container(Admins))))) (created by _Admins)
    in _Admins (created by RouterContext)
    in span (created by _App)
    in MuiThemeProvider (created by _App)
    in _App (created by RouterContext)
    in RouterContext (created by Router)
    in Router

this is the container I’m using:

import { Meteor } from 'meteor/meteor';
import { Tracker } from 'meteor/tracker';

import { setDefaults, merge } from 'react-komposer';

import { Entities } from '../../api/entities/entities.js';
import { Logs } from '../../api/logs/logs.js';

import { Loading } from '../../modules/utility/loading.js';
import { Admins } from '../components/admins/admins.js';

const composerEntities = (params, onData) => {
  const subscription = Meteor.subscribe('admin.entities');
  if (subscription.ready()) {
    const entities = Entities.find().fetch();
    onData(null, { entities });
  }
};

const composerUsers = (params, onData) => {
  const subscription = Meteor.subscribe('admin.users');
  if (subscription.ready()) {
    const users = Meteor.users.find().fetch();
    onData(null, { users });
  }
};

const composerLogs = (params, onData) => {
  const subscription = Meteor.subscribe('admin.logs');
  if (subscription.ready()) {
    const logs = Logs.find().fetch();
    onData(null, { logs });
  }
};

const composerRoles = (params, onData) => {
  const subscription = Meteor.subscribe('roles');
  if (subscription.ready()) {
    const roles = Meteor.roles.find().fetch();
    onData(null, { roles });
  }
};

const composerUser = (params, onData) => {
  onData(null, { user: Meteor.user() });
};

const myCompose = setDefaults({
  pure: false,
  propsToWatch: [],
  loadingHandler: () => (Loading),
});

function getTrackerLoader(reactiveMapper) {
  return (props, onData, env) => {
    let trackerCleanup = null;
    const handler = Tracker.nonreactive(() => {
      return Tracker.autorun(() => {
        trackerCleanup = reactiveMapper(props, onData, env);
      });
    });

    return () => {
      if(typeof trackerCleanup === 'function') trackerCleanup();
      return handler.stop();
    };
  };
}

export default merge(
  myCompose(getTrackerLoader(composerEntities)),
  myCompose(getTrackerLoader(composerUsers)),
  myCompose(getTrackerLoader(composerLogs)),
  myCompose(getTrackerLoader(composerRoles)),
  myCompose(getTrackerLoader(composerUser)),
)(Admins);

#2

Have you changed anything from <Admins /> component?

#3

Solved. To anyone else who has this issue: