1. // dynamic loading component example
  2. import React, { useState } from 'react';
  3. import './App.css';
  4. import UIKit from './pages/UIKit';
  5. import ExampleCrud from './pages/ExampleCrud';
  6. import ExampleControlledFrom from './pages/ExampleControlledFrom';
  7.  
  8. function App() {
  9.   const [section, setSection] = useState<number>(-1)
  10.  
  11.   function renderComponent() {
  12.     switch(section) {
  13.       case -1: return <div>Scegli la sezione</div>;
  14.       case 0: return <UIKit/>;
  15.       case 1: return <ExampleCrud/>;
  16.       case 2: return <ExampleControlledFrom/>;
  17.     }
  18.   }
  19.  
  20.   return <div className="container mt-2">
  21.     <button onClick={() => setSection(0)}>Uikit</button>
  22.     <button onClick={() => setSection(1)}>Crud</button>
  23.     <button onClick={() => setSection(2)}>Form</button>
  24.     { section === -1 && <div>Scegli la sezione</div>}
  25.     { section === 0 && <UIKit/>}
  26.     { section === 1 && <ExampleCrud/>}
  27.     { section === 2 && <ExampleControlledFrom />}
  28.  
  29.     {
  30.       renderComponent()
  31.     }
  32.   </div>
  33. }
  34.  
  35. export default App;
  36.  
  37.