Attempting to retrieve user data from the GitHub API and render the data using React class component lifecycle methods. Help!

App.js

import React from 'react'
import './App.css'

import axios from 'axios'

import UserCard from './Components/UserCard'
// import FollowersList from './Components/FollowersList'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      newUser: null,
      userInfo: function getUserInfo() {
        return axios({
          method: 'get',
          url: `https://api.github.com/users/hutchcrowley`,
          headers: {
        SECRET AUTHORIZATION TOKEN 
          }
        })
      },
      followerInfo: function getFollowerInfo() {
        return axios({
          method: 'get',
          url: `https://api.github.com/users/hutchcrowley/followers`,
          headers: {
            Authorization: 'SECRET AUTHORIZATION TOKEN '
          }
        })
      }
    }
    console.log('Application state data inside of constructor: ', this.state)
  }

  componentDidMount() {
    //   Fetch initial data from API, then set state to the new data
    console.log('Current Application State Post API CALL: ', this.state)
    axios
      .all([this.state.userInfo(), this.state.followerInfo()])
      .then(
        axios.spread((res, fRes) => {
          this.setState({
            newUsers: res.data,
            newFollowers: fRes.data,
            newUser: res.data
          })
        })
      )
      .catch(err => console.log('Error: data not returned from server', err))
  }

  render() {
    console.log('newUsers object on state directly after Render Method Call: ', this.state.newUsers)
    //   Render JSX to the DOM
    return (
      <section className='App'>
        <header className='App-header'>
          <h1>Hutch Crowley's Github Info</h1>
        </header>
        <div className='user-card'>
          {this.state.newUser && <UserCard {...this.state.newUser} />}
        </div>
      </section>
    )
  }
}

export default App

comments.md

Help!

I've been learning React, but this is my first exposure to trying to honestly figure out class components/ lifecycle methods. I thought they looked easier for some reason, but I'm so used to functional components with hooks now that I'm totally lost on where I should be adding variables, functions, etc. Basically, the main problem that I am having is that newUser.data that is returned from the API is coming in as an object, and not an array as I expected. Normally, this wouldn't be a problem, however I can't seem to get it to work. I did not realize how finicky class components can be about where to place things. IF anyone has any suggestions I'd really appreciate it! Cheers.

Response from GitHub API

{
  "login": "hutchcrowley",
  "id": 16690781,
  "node_id": "MDQ6VXNlcjE2NjkwNzgx",
  "avatar_url": "https://avatars3.githubusercontent.com/u/16690781?v=4",
  "gravatar_id": "",
  "url": "https://api.github.com/users/hutchcrowley",
  "html_url": "https://github.com/hutchcrowley",
  "followers_url": "https://api.github.com/users/hutchcrowley/followers",
  "following_url": "https://api.github.com/users/hutchcrowley/following{/other_user}",
  "gists_url": "https://api.github.com/users/hutchcrowley/gists{/gist_id}",
  "starred_url": "https://api.github.com/users/hutchcrowley/starred{/owner}{/repo}",
  "subscriptions_url": "https://api.github.com/users/hutchcrowley/subscriptions",
  "organizations_url": "https://api.github.com/users/hutchcrowley/orgs",
  "repos_url": "https://api.github.com/users/hutchcrowley/repos",
  "events_url": "https://api.github.com/users/hutchcrowley/events{/privacy}",
  "received_events_url": "https://api.github.com/users/hutchcrowley/received_events",
  "type": "User",
  "site_admin": false,
  "name": "Hutch Crowley",
  "company": "Lambda School",
  "blog": "https://www.hutchssite.wordpress.com",
  "location": "Nashville, TN",
  "email": null,
  "hireable": true,
  "bio": "From Nashville, TN. Spent some years hopping between the west coast and my hometown. I love music and coding.",
  "public_repos": 44,
  "public_gists": 2,
  "followers": 14,
  "following": 24,
  "created_at": "2016-01-13T18:56:33Z",
  "updated_at": "2019-12-12T09:52:32Z"
}

UserCard.js

import React from 'react'

const UserCard = ({id}) => {
  console.log(id)
  return(
  <div className='user'>
  <h1>
  key: {id}
  </h1>
</div>
  )
}

export default UserCard