Pass components as props to another component

I'm trying to create an "AB Test" component:

import React from 'react'; import PropTypes from 'prop-types'; const AbTest = ({ components, criteriaToMatch }) => { let componentToRender; components.forEach((component) => { if (component.criteria === criteriaToMatch) { componentToRender = component.instance; } }); return componentToRender; }; AbTest.propTypes = { components: PropTypes.arrayOf(PropTypes.shape({ instance: PropTypes.func, criteria: PropTypes.any, })), criteriaToMatch: PropTypes.oneOfType([ PropTypes.bool, PropTypes.string, PropTypes.number, ]), }; export default AbTest; 

You'll then use it like this:

import MyComponentA from '../my-component-a'; import MyComponentB from '../my-component-b'; <AbTest components={[ { instance: MyComponentA, criteria: 'A' }, { instance: MyComponentB, criteria: 'B' }, ]} criteriaToMatch="A" /> 

So you'll pass it an array of components each having some criteria, and which ever matches gets rendered. But I'm getting an error saying:

Functions are not valid as a React child