SHARE
TWEET

Untitled

a guest Nov 11th, 2019 110 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from "react";
  2.  
  3.  
  4. class Australia 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&nat=au")
  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 Australia;
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