DisplayNationalParkData

import React, { Component } from 'react';
import Popup from "reactjs-popup";


class DataDisplay extends Component{
  constructor(props){
    super(props);

    this.state = {
      parks: [],
      size:0
    };

  }

  handleClick (park) {
    alert(park[0]+'\n'+park[1]);
  }

  componentDidMount(){

    fetch('https://cors-anywhere.herokuapp.com/https://prm-interview.s3.amazonaws.com/parks.json')
    .then(results => {
      return results.json();
    }).then(data => {
      for(var i =0; i<data.length;i++){
        var park = [];
        park.push(data[i].Name);
        park.push(data[i].Image);
        park.push(data[i].Thumbnail);
        park.push(data[i].Location);
        park.push(data[i].Established);
        park.push(data[i].Area);
        park.push(data[i]["Recreation visitors"]);
        park.push(data[i].Description);
        this.state.parks.push(park);
      }
      this.setState({
        size:data.length
      });
    })
  }




  render(){

    return(
      this.state.parks.map((park)=>{
        return(
          <Popup position="center center" modal={true} trigger={<img src={park[2]} alt={park[0]} border='1.5' height='150' width={window.innerWidth/6}></img>} >
            <div className='App-link'>
              <h4>{park[0]}</h4>
              <img src={park[1]} alt="img" width="75%" height="75%"></img>
              <div >{"Location: "+park[3]}</div>
              <div >{park[0] +" was established in "+park[4]+" with an area of " + park[5] + " and " + park[6] + " recreational visitors."}</div>
              <div>{park[7]}</div>
            </div>
          </Popup>
        )
      })



    );}


}export default DataDisplay;