React componentDidMount not being called

So below is a component that I built:

import React    from 'react';
import ReactDOM from 'react-dom';

class DisplayBlogs extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      error: null,
      data:  null
    }
  }

  componentDidMount() {
    console.log('WTF');
    var self   = this;
    var url    = "//" + location.hostname + "/api/v1/blogs/"

    $.get(url, function(result) {
      self.setState({
        errors:         null,
        data:           result.data
      });
    }).fail(function(response) {
      self.setState({
        error: 'Could not fetch group data. Looks like something went wrong.'
      });
    });
  }

  checkIfLoading() {
    if (this.state.data === null &&
        this.state.errors === null) {

      retu true;
    }

    retu false;
  }

  displayErrors() {
    if (this.state.errors !== null && this.state.errors !== undefined) {
      retu(
        <div className="alert alert-danger">
          <strong>Attn!</strong> {this.state.errors}
        </div>
      );
    }
  }

  showLoading() {
    if (this.checkIfLoading()) {
      retu (
        <div className="white-panel">
          <i className="fa fa-spier fa-spin"></i> One second please, while I fetch the data ....
        </div>
      );
    }
  }

  getAllBlogs() {
    const self = this;

    let blogs = this.state.data.blogs.map(blog => {

      retu (
        <div>
          <div className="white-panel">
            <h3 className="bordered-title">Blog Title</h3>
          </div>

          {self.getAllPostsForBlog(blog)}
        </div>
      )
    });

    retu blogs;
  }

  getAllPostsForBlog(blog) {
    let posts = blog.posts.map(post => {
      retu(
        <div className="white-panel">
          <div className="pull-left">
            <h4><a href="#" onClick={self.clickedPostTitle.bind(self, post.slug)}>post.title</a></h4>
          </div>
          <div className="pull-right moveDownTen increaseIconSize">
            <a href="#" className="paddingOnTheRightTen"><i className="fa fa-pencil"></i></a>
            <a href="#"><i className="fa fa-trash"></i></a>
          </div>
          <div className="clearfix"></div>
        </div>
      );
    });

    retu posts;
  }

  clickedPostTitle(slug) {
    console.log(slug);
  }

  render() {
    retu (
      <div>
        {this.showLoading()}
        {this.displayErrors()}
        {this.getAllBlogs()}
      </div>
    )
  }
}

module.exports = DisplayBlogs;

Everything to me seems normal. Notice the console.log('WTF'); which is never called. Like ever.

So how is this used?

First I import it:

import BlogDetails  from './blog/display_blogs';

Then I use it:

retu (
  <div id="blog" className="tab-pane fade in active moveDownTwenty">
    <div className="row">
      <div className="col-xl-6 col-md-6 col-sm-12 col-xs-12">
          <BlogDetails />
      </div>
      <div className="col-xl-6 col-md-6 col-sm-12 col-xs-12">
          Tags
          Categories
      </div>
    </div>
  </div>
);

Nothing fancy: <BlogDetails /> I get a console error: Uncaught TypeError: Caot read property 'blogs' of null because the componentDidMount is never called so the data is never registered.

Can some one tell me what silly mistake I have made is? I do not do server side rendering.