purushotamrai

import React from 'react';
import DestinationItem from "./DestinationItem";

export default class DestinationList extends React.Component {

  render() {
    let { data } = this.props;
    return (
      <div>
        <h1>Here are your best Travel Destinations</h1>

purushotamrai

 render() {
    return (
      <div className="App">
        <DestinationList
          data={this.state.data}
        />
      </div>
    );
  }

purushotamrai

 componentWillMount() {
   this.loadDestinations();
 }

purushotamrai

 updateData(responseData) {
   this.setState({data: responseData.data});
 }

purushotamrai

 loadDestinations() {
    // Fetch Destinations.
    fetch(LIST_URL, {mode:'cors'})
      .then(function (response) {
        return response.json();
      })
      .then((data) => this.updateData(data))
      .catch(err => console.log('Fetching Destinations Failed', err));
  }

purushotamrai

const LIST_URL = 'http://td-drupal.local:80/jsonapi/node/destination';

purushotamrai

  constructor() {
    super();
    this.state = { data: null };
    this.loadDestinations = this.loadDestinations.bind(this);
    this.updateData = this.updateData.bind(this);
  }

purushotamrai

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import DestinationList from "./Components/Destination/DestinationList";

class App extends Component {
  render() {
    return (
      <div className="App">
        <DestinationList/>

purushotamrai

import React from 'react';
import DestinationItem from "./DestinationItem";

export default class DestinationList extends React.Component {

  render() {
    return (
      <div>
        <h1>Here are your best Travel Destinations</h1>
        <DestinationItem/>

purushotamrai

import React from 'react';

export default class DestinationItem extends React.Component {

  render() {
    return (
      <div>
        <h2>Travel Destination Title</h2>
        <div>Travel Destination Description goes here</div>