Advertisement
Guest User

Untitled

a guest
Nov 11th, 2019
126
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.52 KB | None | 0 0
  1. import React, { Component } from "react";
  2.  
  3.  
  4. class Home extends Component {
  5.  
  6. constructor(props) {
  7. super(props);
  8. this.state = {
  9. items: []
  10. };
  11. }
  12.  
  13. componentDidMount() {
  14. fetch("https://randomuser.me/api/?results=10")
  15. .then(res => res.json())
  16. .then(parsedJSON => parsedJSON.results.map(data => (
  17. {
  18. id: `${data.id.name}`,
  19. firstName: `${data.name.first}`,
  20. lastName: `${data.name.last}`,
  21. location: `${data.location.state}, ${data.nat}`,
  22. thumbnail: `${data.picture.large}`,
  23.  
  24. }
  25. )))
  26. .then(items => this.setState({
  27. items,
  28. isLoaded: false
  29. }))
  30. .catch(error => console.log('parsing failed', error))
  31. }
  32.  
  33. render() {
  34. const {items } = this.state;
  35. return (
  36. <div className="boxWhite">
  37. <h2>Random User</h2>
  38. {
  39. items.length > 0 ? items.map(item => {
  40. const {id, firstName, lastName, location, thumbnail} = item;
  41. return (
  42.  
  43. <div key={id} className="bgCircle">
  44. <center><img src={thumbnail} alt={firstName} className="circle"/> </center><br />
  45. <div className="ctr">
  46. {firstName} {lastName}<br />
  47. {location}
  48. </div>
  49.  
  50. </div>
  51. );
  52. }) : null
  53. }
  54. </div>
  55. );
  56.  
  57. }
  58. }
  59.  
  60. export default Home;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement