daily pastebin goal
51%
SHARE
TWEET

Untitled

a guest May 17th, 2018 104 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. class DataTable extends React.Component {
  2.   constructor(props) {
  3.     super(props);
  4.     this.state = {
  5.       error: null,
  6.       isLoaded: false,
  7.       items: []
  8.     };
  9.   }
  10.  
  11.   componentDidMount() {
  12.     fetch("/data")
  13.       .then(res => res.json())
  14.       .then(
  15.         (result) => {
  16.           this.setState({
  17.             isLoaded: true,
  18.             items: result
  19.           });
  20.         },
  21.         (error) => {
  22.           this.setState({
  23.             isLoaded: true,
  24.             error
  25.           });
  26.         }
  27.       )
  28.   }
  29.  
  30.   render() {
  31.     const { error, isLoaded, items } = this.state;
  32.     if (error) {
  33.       return <div>Error: {error.message}</div>;
  34.     } else if (!isLoaded) {
  35.       return <div>Loading...</div>;
  36.     } else {
  37.       return (
  38.         <div>
  39.           <table>
  40.             <tbody>
  41.               {items.map(item => (
  42.                 <tr key={item.id}>
  43.                   <td>
  44.                     {item.name} {item.age} {item.phone} {item.email} {item.location}
  45.                   </td>
  46.                 </tr>
  47.               ))}
  48.             </tbody>
  49.           </table>
  50.           <AddForm />
  51.         </div>
  52.       );
  53.     }
  54.   }
  55. }
RAW Paste Data
Top