title: Creating components based on data received from server/database
body: <p>I'm trying to create a blog feed that is generated from a data set acquired from a server/file so far I have created a component to render the data but the source I've used, uses basic HTML components where I use another framework called CoreUI to wrap my data with.</p>
  <p>Here's the rendering component:</p>
  <pre><code>import { CardCreator } from './customComponent/CardCreator'
  import { createElement } from 'react'
  import { CustomHeader } from './customComponent/CustomHeader'
  import { CustomCardBody } from './customComponent/CustomCardBody'
  import { CustomCardFooter } from './customComponent/CustomCardFooter'
  
  
  const keysToComponentMap = {
    CCard: CardCreator,
    CCardHeader: CustomHeader,
    CCardBody: CustomCardBody,
    CCardFooter: CustomCardFooter,
  }
  
  export const renderComponent = (config) =&gt; {
    console.log(config)
    if (typeof keysToComponentMap[config.component] !== 'undefined') {
      return createElement(
        keysToComponentMap[config.component],
        config.children &amp;&amp;
          (typeof config.children === 'string'
            ? config.children
            : config.children.map((c) =&gt; renderComponent(c))),
      )
    }
  }
  </code></pre>
  <p>And here's the dummy data I've used to test</p>
  <pre><code>export const config = {
    component: 'CCard',
    children: [
      {
        component: 'CCardHeader',
        children: ['dummy'],
      },
      {
        component: 'CCardBody',
        children: ['dummy'],
      },
      {
        component: 'CCardFooter',
        children: ['dummy'],
      },
    ],
  }
  
  export default config
  </code></pre>
  <p>In theory this should recursively create elements and render them in DOM but for some reason I can't get this to work.</p>