Why am I not rendering my state to the screen?

Question

Second time posting on stackoverflow :) Hopefully I won't be too vague.

I'm currently in the process of learning react and am really struggling. Today I am trying to figure out how to render the state (in the code it is this.state.feelings) to the screen.

Everything is console.logging the correct information, so I know the state HAS changed. I'm just not sure why it's not rendering.

import React, { Component } from 'react';
import getFeelings from '../calls/createStatsFeelings.js'
import API from "../../util/axiosApi.js";

class Stats extends Component {
  state = {
    feelings:''
  };

  componentDidMount() {
    this.getFeelings();
  }

  getFeelings = () => {
      API.getFeelings()
        .then( res =>
          {
            return this.setState({ feelings: res.data[0].feeling }, function 
() {console.log(this.state.feelings)})
          }
      )
        .catch(err => console.log(err));
      };

  render() {
    return (
       <div className='statsDiv'>
        <h1> {this.state.feelings} </h1>
      </div>
    )
  }
}


export default Stats;

Any idea what I'm doing wrong?

more code:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import logo from './logo.svg';
import './App.css';
import Navbar from './components/navbar/Navbar.js';
import Login from './components/login/Login.js';
import Register from './components/register/Register.js';
import Goals from './components/goals/Goals.js';
import Stats from './components/stats/Stats.js';
import Update from './components/update/Update.js';
import Dashboard from './components/dashboard/Dashboard.js';
import DashboardReasons from './components/reasons/Reasons2.js';

// Stating 'extends Component' has nothing to do with the children
// It is extending the capability of the class being declared
// class App is declared with the extended ability of component
class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Navbar />
          <Switch>
            <Route exact path="/" component={Login} />
            <Route exact path="/register" component={Register} />
            <Route exact path="/dashboard" component={Dashboard} />
            <Route exact path="/goals" component={Goals} />
            <Route exact path="/update" component={Update} />
            <Route exact path="/stats" component={Stats} />
            <Route exact path="/reasons" component={DashboardReasons} />
            {/* TODO - NoMatch Route */}
          </Switch>
        </div>
      </Router>
    );
  }
}

Answer 1

The first file you posted works fine.

Here it is, slightly modified to work in a browser:

const api = {
  getFeelings() {
    return Promise.resolve({
      data: [
        { feeling: 'test' }
      ]
    })
  }
}

class Stats extends React.Component {
  state = {
    feelings: ''
  };

  componentDidMount() {
    this.getFeelings();
  }

  getFeelings = () => {
    api.getFeelings()
      .then(res => {
        return this.setState({ feelings: res.data[0].feeling }, function () {
          console.log(this.state.feelings)
        })
      })
      .catch(err => console.log(err));
  };

  render() {
    return (
      <div className='statsDiv'>
        <h1> {this.state.feelings} </h1>
      </div>
    )
  }
}

const div = document.createElement('div')
document.body.appendChild(div)
ReactDOM.render(<Stats />, div)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

You'll need to post the rest of your code for more help. (Please don't add any more files to your question, create the app online using something like https://stackblitz.com/ and add the link here).