Create Dynamic Component (by JSON)

import React, { FunctionComponent, FunctionComponentElement, useEffect, useState } from 'react';
import cn from 'classnames';

export const WidgetProfile = (props: any) => {
  return <div style={{ color: props.color}}>
    Profile {props.title}
    <button onClick={() => props.onAction(123)}>go to profile</button>
  </div>
}

export const WidgetChart = (props: any) => {
  return <div>Chart {props.title} {props.children}</div>
}

export const Tabbar = (props: any) => {
  return <div>
    {
      props.items.map((item: any) => <li key={item} onClick={() => props.onAction(item)}>{item}</li>)
    }
    {props.active}
  </div>
}

const COMPONENTS: { [key: string]: FunctionComponent<{ title: string }> } = {
  chart: WidgetChart,
  profile: WidgetProfile,
  tabbar: Tabbar,
}

const dashboard: any = [
  {
    component: 'profile',
    data: { id: 1, title: 'yo!', color: 'red' }
  },
  {
    component: 'chart',
    data: { id: 2, title: 'sono un chart!' }
  },
  {
    component: 'tabbar',
    data: { id: 3, items: [10, 20, 30], active: 2 }
  },
]

export default function App() {

  const onActionHandler = (componentType: string, params: any) => {
    console.log('onActionHandler', componentType, params)
  }
  return <div>
    {
      dashboard.map((item: any, index: number) => {
        console.log(item)

        const component: FunctionComponentElement<{ title: string}>
          = React.createElement(
            COMPONENTS[item.component],
           { ...item.data, key: index, onAction: (params: any) => onActionHandler(item.component, params) }
          )
        return component;
      })
    }
  </div>
}