title: What is the idiomatic way of passing a component factory to another component in React.js?
body: <p>I have a simple list component that renders an array of items.  The item components have more functionality (click handlers, etc.) and there are different types of items I might want to render inside this list component.  </p>
  
  <p>I know about higher order components, but they don't seem applicable here, as I'm not wrapping something, but rather generating components from an array.  </p>
  
  <p>This is how I've approached it so far, with a functional component for the list:</p>
  
  <pre><code>function ResultsList(props)
  {
      var items = (props.items || []).map(function(item, i) {
              return &lt;props.ItemComponent
                  key={item.id}
                  item={item}
                  index={i}
                  {...props}
              /&gt;
          });
  
      return (
          &lt;ul className="results-list"
              style={{ display: items.length ? "block" : "none" }}
          &gt;
              {items}
          &lt;/ul&gt;
      );
  }
  </code></pre>
  
  <p>The <code>ResultsList</code> component is then used in the <code>render()</code> method of another component:</p>
  
  <pre><code>render: function()
  {
      var items = this.generateItems();
  
      return (
          &lt;div&gt;Item count: {items.length}&lt;/div&gt;
          &lt;ResultsList
              items={items}
              ItemComponent={this.state.itemType == 1 ? ItemType1 : ItemType2}
          /&gt;
      )
  }
  </code></pre>
  
  <p>Which kind of item to render inside <code>ResultsList</code> depends on the component's state, so different item components will be passed in as a prop to the list.</p>
  
  <p>I could also generate the list of items in this <code>render()</code> method, and then pass them into <code>ResultsList</code> as <code>props.children</code>.  Yet somehow encapsulating the list generation inside the <code>ResultsList</code> component feels cleaner.  But I may be off here.</p>