SHARE
TWEET

DisplayNationalParkData

a guest Sep 20th, 2019 78 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import Popup from "reactjs-popup";
  3.  
  4.  
  5. class DataDisplay extends Component{
  6.   constructor(props){
  7.     super(props);
  8.  
  9.     this.state = {
  10.       parks: [],
  11.       size:0
  12.     };
  13.  
  14.   }
  15.  
  16.   handleClick (park) {
  17.     alert(park[0]+'\n'+park[1]);
  18.   }
  19.  
  20.   componentDidMount(){
  21.  
  22.     fetch('https://cors-anywhere.herokuapp.com/https://prm-interview.s3.amazonaws.com/parks.json')
  23.     .then(results => {
  24.       return results.json();
  25.     }).then(data => {
  26.       for(var i =0; i<data.length;i++){
  27.         var park = [];
  28.         park.push(data[i].Name);
  29.         park.push(data[i].Image);
  30.         park.push(data[i].Thumbnail);
  31.         park.push(data[i].Location);
  32.         park.push(data[i].Established);
  33.         park.push(data[i].Area);
  34.         park.push(data[i]["Recreation visitors"]);
  35.         park.push(data[i].Description);
  36.         this.state.parks.push(park);
  37.       }
  38.       this.setState({
  39.         size:data.length
  40.       });
  41.     })
  42.   }
  43.  
  44.  
  45.  
  46.  
  47.   render(){
  48.  
  49.     return(
  50.       this.state.parks.map((park)=>{
  51.         return(
  52.           <Popup position="center center" modal={true} trigger={<img src={park[2]} alt={park[0]} border='1.5' height='150' width={window.innerWidth/6}></img>} >
  53.             <div className='App-link'>
  54.               <h4>{park[0]}</h4>
  55.               <img src={park[1]} alt="img" width="75%" height="75%"></img>
  56.               <div >{"Location: "+park[3]}</div>
  57.               <div >{park[0] +" was established in "+park[4]+" with an area of " + park[5] + " and " + park[6] + " recreational visitors."}</div>
  58.               <div>{park[7]}</div>
  59.             </div>
  60.           </Popup>
  61.         )
  62.       })
  63.  
  64.  
  65.  
  66.     );}
  67.  
  68.  
  69. }export default DataDisplay;
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