daily pastebin goal
82%
SHARE
TWEET

Untitled

a guest Feb 3rd, 2018 94 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import * as React from 'react';
  2. import { RouteComponentProps } from "react-router";
  3. import 'isomorphic-fetch';
  4.  
  5.  
  6. interface Product {
  7.     productId: number;
  8.     name: string;
  9. }
  10.  
  11. interface ProductPaginated {
  12.     products: Product[];
  13.     totalPage: number;
  14. }
  15.  
  16. interface ProductState {
  17.     productPaginated: ProductPaginated;
  18. }
  19.  
  20. export class ProductList extends React.Component<any, ProductState> {
  21.  
  22.     constructor(props: any) {
  23.         super(props);
  24.         this.state = {productPaginated: {products: [], totalPage: 1}};
  25.  
  26.         fetch('/api/data/ShakeRepository')
  27.             .then(response => response.json() as Promise<ProductPaginated>)
  28.             .then(data => {
  29.                 this.setState({productPaginated : data});
  30.             });
  31.     }
  32.    
  33.     render()
  34.     {
  35.        
  36.         let cs  = this.state.productPaginated.products;
  37.         return (
  38.             <table className='table'>
  39.                 <thead>
  40.                 <tr>
  41.                     <th>Products</th>
  42.                     <th>Name</th>
  43.                 </tr>
  44.                 </thead>
  45.                 <tbody>
  46.                 {cs.map((c) =>
  47.                     <tr key={ c.productId }>
  48.                         <td>{ c.name }</td>
  49.                     </tr>
  50.                    
  51.                 )}
  52.                 </tbody>
  53.             </table>  
  54.         );
  55.     }
  56. }
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