import React, { Component } from "react";
import "./App.css";

class App extends React.Component {
 constructor() {
        super();
        this.state = {
          items: [],
          totalPages: '',
          nextPage: '',
        };
        this._loadData = this._loadData.bind(this);
      }
      componentDidMount() {
        const url = 'http://localhost/wp-json/wp/v2/';
        this._loadData(url);

      }
      _loadData(url) {
        request.get(url).then((response) => {
          this.setState({
            items: response.body.items.data,
            totalPages: response.body.items.last_page,
            nextPage: response.body.items.next_page_url
          });
        });
      }
      render() {
        let items = _.map(this.state.items, (item) => {
        return (
                <div key={item.id}>
                        <div className="content">
                            <span>
                                {item.type}
                            </span>

                        </div>
                </div>
        )
    });
        return (
            <div>
               {items}
            </div>

            <div>
               <a href="#0" onClick={this._loadData(this.state.nextPage)}/>Next
            </div>
      }
}

export default App;