React Loading a Dynamic Template using JSX & ES6 - reactjs

Question

I'm pretty new to React, coming from an angular world. I have a scenario where I need to dynamically load a component give a searchType prop. The end user will have a dropdown of searchTypes they can pick from, this prop is passed in after they click the submit button.
I have a SearchResults component defined, which should dynamically load the appropriate component depending on the value of this.props.searchType.name
import React, { findDOMNode, Component, PropTypes } from 'react';
import Material from './Material'; // Material Search Results Component
import Vendor from './Vendor'; // Vendor Search Results Component
export default class SearchResults extends Component {
constructor(props){
super(props);
}
// searchType = {
// name: 'Material',
// id: 'MATERIAL'
// }
render() {
const { searchType, items, itemsCount } = this.props;
var ComponentName = searchType.name;
return (
<div className='row'>
<h1>Search Results ({items.length}/{itemsCount})</h1>
<ComponentName items={items} />
</div>
);
}
}
SearchResults.propTypes = {
items: PropTypes.array.isRequired
};
Now, this seems to partially work as when using the React Dev Tools in chrome I can see the provider/component show up in the DOM.. but it doesn't render.
I'm just not sure where to go next from here, or if i'm doing something wrong.

Answer 1

You're trying to use a string instead of the actual class. I think you want something like this:
var searchTypes = {
Material,
Vendor,
};
// ...
var Component = searchTypes[searchType.name];
return (
<div className='row'>
<h1>Search Results ({items.length}/{itemsCount})</h1>
<Component items={items} />
</div>
);
Here's a simple example.

Answer 2

You could try a switch statement.
render() {
//...
var component;
switch(searchType.name){
case "material":
component = <Material items={items} />
case "vendor":
component = <Vendor items={items} />
}
return (
//...
{component}
)
}