How to use the recompose.renderComponent function in recompose

);
}

NoWebRTCSupport.propTypes = {
  // eslint-disable-next-line react/no-typos
  intl: intlShape.isRequired
};

const isNotSupported = ({media}) =>
  media.getIn(['webRTC', 'hasCheckedSupport']) &&
  !media.getIn(['webRTC', 'isSupported']);

export default branch(
  isNotSupported,
  renderComponent(NoWebRTCSupport)
);

props$.filter(({ layers }) => !layers || layers.length === 0)
                        .take(1)
                        .do(({ onClose = () => { } }) => onClose && onClose()).ignoreElements()
                )
        )),
    branch(
        ({ enabled }) => !enabled,
        renderNothing
    ),
    branch(
        ({ layers }) => !layers || layers.length === 0,
        compose(
            connect(() => ({}), {
                loadMap: configureMap
            }),
            renderComponent(DragZone)
        )
    )
)(StyleDialog);

export default (Component: ReactClass<*>) =>
  compose(
    branch(
      ({ geneId }) => !geneId,
      renderComponent(() => (
        <div>
          <pre>geneId</pre> must be provided
        </div>
      )),
    ),
    withPropsOnChange(['geneId'], ({ geneId }) =&gt; {
      return {
        variables: {
          filters: makeFilter([
            {
              field: 'genes.gene_id',
              value: [geneId],
            },
          ]),
        },
      };

const displayWhich = shouldDisplay =>
  branch(
    props => shouldDisplay(props),
    renderComponent(NotJStepOrIs)
  )

/>
    ),
  };
});

const NoTransactions = () => (
  
);

const withoutTransactions = branch(
  ({ transactionsByCategories }) => R.isEmpty(transactionsByCategories),
  renderComponent(NoTransactions),
);

const TransactionsGroupedByCategories = compose(
  withTransactionsByCategories,
  withDataSource('categoriesById'),
  withGroupedTransactions,
  withoutTransactions,
)(ListView);

export default TransactionsGroupedByCategories;

file_count: number,
  }>,
}): number => {
  const slideTypes = ['Diagnostic Slide', 'Tissue Slide'];
  return (summary.experimental_strategies || []).reduce(
    (slideCount, { file_count, experimental_strategy }) =>
      slideTypes.includes(experimental_strategy)
        ? slideCount + file_count
        : slideCount,
    0,
  );
};
export default compose(
  branch(
    ({ viewer }) => !viewer.repository.cases.hits.edges[0],
    renderComponent(() =&gt; <div>No case found.</div>),
  ),
  withTheme,
)(({ theme, viewer: { repository: { cases: { hits: { edges } } } } }) =&gt; {
  const p = edges[0].node;
  const totalFiles = p.files.hits.total;
  const imageFiles = p.files.hits.edges.filter(
    ({ node }) =&gt; node.data_type === 'Slide Image',
  );
  const slideCount = slideCountFromCaseSummary(p.summary);
  return (
    
      
            <i> Summary</i>

* Attach the setup hooks.
			 */
			withSetup(),

			/**
			 * Pass some handlers to the component.
			 */
			withHandlers({
				handleChange: ({ field, setFieldValue }) => value => setFieldValue(field.id, value.map(item => item.value))
			}),
		),

		/**
		 * Render the empty component.
		 */
		renderComponent(NoOptions)
	)
);

export default setStatic('type', [
	TYPE_MULTISELECT,
])(enhance(MultiselectField));

const showErrorMessageIfError = hasLoaded =>
  branch(hasLoaded, renderComponent(page500(CoderBot)), t => t)
const errorHandler = showErrorMessageIfError(props => props.errorTemp)