ReactJS transferring props to dynamic component
<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>