Recompose replacenent

utils.js

const renderComponent = R.curryN(2, React.createElement)
const setDisplayName = displayName => R.tap(C => { C.displayName = displayName })
const hasProperty = (prop, obj) => Object.prototype.hasOwnProperty.call(obj, prop);
const renderNothing = () => () => null

const renderComponent = Component => () => {
  const RenderComponent = props => createElement(Component)(props)

  if (process.env.NODE_ENV !== 'production') {
    const name = Component && Component.name + '(renderComponent)' || 'renderComponent'
    return setDisplayName(name)(Component)
  }

  return RenderComponent
}

const cond = (test, testOptions) => BaseComponent => {
  const factoryCache = {}
  const base = BaseComponent || null

  const Cond = props => {
    const testOption = test(props)

    if (testOption in testOptions) {
      const component = createElement(testOptions[testOption](base))
      const factory = factoryCache[testOption] || component

      factoryCache[testOption] = factory

      return factory(props)
    }

    return createElement(base)(props)
  }

  if (process.env.NODE_ENV !== 'production') {
    const displayName = BaseComponent && BaseComponent.name + '(Cond)' || 'Cond'
    return setDisplayName(displayName)(Cond)
  }

  return Cond
}

cond(
  ({ contactFormState }) => contactFormState,
  {
    [CONTACT_FORM_STATE.inactive]: renderNothing,
    [CONTACT_FORM_STATE.makeContact]: renderComponent(ContactForm),
    [CONTACT_FORM_STATE.createUser]: renderComponent(CreateUserForm)
  }
);

const users = [
  {"id":"cc303339-62ad-4c74-b87c-4e28e8f2ffc2","name":"Billi Morfett","gender":"Female","avatar":"https://robohash.org/utinciduntrepellendus.png?size=75x75&set=set1"},
  {"id":"2f1c8cfe-21f5-4be3-b479-acd2cab67fcb","name":"Garry Stollsteiner","gender":"Male","avatar":"https://robohash.org/repellendusconsequunturanimi.bmp?size=75x75&set=set1"},
  {"id":"010af971-93d2-4e6b-af5b-ce46cc427b08","name":"Emlen Cheves","gender":"Male","avatar":"https://robohash.org/cupiditatevoluptatemvitae.jpg?size=75x75&set=set1"},
  {"id":"f80e1d5d-43f7-4d02-93e9-a123a93ce081","name":"Boote Oneil","gender":"Male","avatar":"https://robohash.org/quiavoluptatemveritatis.png?size=75x75&set=set1"},
];

const where = (specObj, testObj) => {
  const specEntries = Object.entries(specObj);

  return specEntries.every(([prop, test]) => {
    if (!hasProperty(prop, testObj)) {
      return false;
    }
    return test(testObj[prop]);
  });
};

  const specObj = {
    name: (userName) => userName.toLowerCase().includes(filters.userName),
    gender: (userGender) => (!filters.userGender.length ? true : filters.userGender.includes(userGender.toLowerCase())),
  };

  const filteredUsers = users.filter((testObj) => where(specObj, testObj));