title: ReactJS transferring props to dynamic component
body: <p>Currently I have built a very simple factory that looks at a JSON config and uses that to dynamically generate components and appropriate props for that component:</p>
  
  <pre><code>let exampleJSON = {
    "components": [
      {
        "type":"ComponentA",
        "params": { myProp: "hey there"  }
      },
      {
        "type":"ComponentB",
        "params": { myOtherProp: "Yo"  }
      }
    ]
  }
  
  const ComponentA = (props) =&gt; {
    let { myProp } = props;
    return  (
      &lt;div&gt;{ myProp }&lt;/div&gt;
    )
  }
  
  const ComponentB = (props) =&gt; {
    let { myOtherProp } = props;
    return  (
      &lt;div&gt;{ myOtherProp }&lt;/div&gt;
    )
  }
  
  const ComponentFactory = (props) =&gt; {
    const { content } = props;
    return (
      &lt;div&gt;
        { 
          content.components.map( (component, index) =&gt; {
            console.log(component);
            let Component = "" + component.type;
            return (
              &lt;Component key={ index } {...component.params } /&gt;
            )
          })
         }
      &lt;/div&gt;
    )
  };
  
  ReactDOM.render(
    &lt;ComponentFactory content={ exampleJSON } /&gt;,
    document.getElementById('root')
  );
  </code></pre>
  
  <p>Example at: <a href="http://codepen.io/jimhill/pen/LboGEY" rel="noreferrer">http://codepen.io/jimhill/pen/LboGEY</a></p>
  
  <p>However, whenever I run this I'm getting the error <code>Unknown prop</code>myProp<code>on &lt;ComponentA&gt; tag</code>. If I manually create it however I do not get this error.</p>
  
  <p>Any ideas?</p>
  
  <hr>
  
  <p>edit: this is fine if I define the elements in an object and reference them by key e.g.</p>
  
  <pre><code>import { render } from 'react-dom';
  import ComponentA from './ComponentA';
  import ComponentB from './ComponentB';
  
  const components = {
      'ComponentA': ComponentA,
      'ComponentB': ComponentB
  }
  
  const TheFactory = (props) =&gt; {
      let Component = components[props.componentType];
      return (
          &lt;div&gt;
              &lt;Component { ...props.componentProps } /&gt;
          &lt;div&gt;
      )
  }
  
  render(
      &lt;TheFactory componentType="ComponentA" componentProps={ SomeProp:"An example" } /&gt;,
      document.getElementById('root')
  );
  </code></pre>