SHARE
TWEET

Untitled

a guest Aug 23rd, 2019 64 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState } from "react";
  2.  
  3. import "./styles.css";
  4. import { MyComponentService } from "./utils/ComponentService";
  5.  
  6. const jsonTemplate = {
  7.   tabs: [
  8.     {
  9.       title: "Login",
  10.       key: "login"
  11.     },
  12.     {
  13.       title: "Wishlist",
  14.       key: "wishlist"
  15.     },
  16.     {
  17.       title: "Products",
  18.       key: "product"
  19.     }
  20.   ]
  21. };
  22.  
  23. function buildMenu(tabs, callback) {
  24.   return tabs.map(item => (
  25.     <button key={item.title} onClick={() => callback(item.key)}>
  26.       {item.title}
  27.     </button>
  28.   ));
  29. }
  30. function App() {
  31.   const [tab, setTab] = useState(jsonTemplate.tabs[0].key);
  32.   const Component = MyComponentService[tab];
  33.   const products = [
  34.     {
  35.       name: "Product 1",
  36.       price: "100"
  37.     },
  38.     {
  39.       name: "Product 2",
  40.       price: "200"
  41.     }
  42.   ];
  43.   return (
  44.     <>
  45.       {buildMenu(jsonTemplate.tabs, setTab)}
  46.       <hr />
  47.       <div className="App">
  48.         <Component products={products} />
  49.       </div>
  50.     </>
  51.   );
  52. }
  53.  
  54. export default App;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top