import React from "react"
import ReactDOM from "react-dom"
import axios from "axios"

class AjaxAxios extends React.Component {
  state = {
    posts: []
  }
  componentDidMount() {
    axios.get('http://127.0.0.1:8000/api/v1/?format=json'.json)
      .then(res => {
        const posts = res.data.data.children.map(obj => obj.data);

        this.setState({
          posts
        });

      })
  }
  render(){
    return(
      <div>
        <ul>
          {this.state.posts.map(post =>
            <a key={post.id} className="title" href="/{post.section}/{post.slug}">{post.title}</a>
            // <span key={post.id} className="time_pub">{ post.timestamp }</span>
            // <span key={post.id} className="section"><a href="/{ n.section }">{ post.section }</a></span>
          )}
        </ul>
      </div>
    );
  }
}


const wrapper = document.getElementById("root");
wrapper ? ReactDOM.render(<AjaxAxios />, wrapper) : null;