Advertisement
Guest User

Untitled

a guest
May 17th, 2018
133
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.15 KB | None | 0 0
  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. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement