Guest User

Untitled

a guest
Aug 23rd, 2019
75
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