TypeError: Cannot read property 'id' of undefined (User is undefined)

Question

I'm making a ReactJs app that started with Create-Repack-App --full that sets up a lot for me including the user with the Devise gem and without a need to set headers along the way. I have created a user with the typical test@test.com, etc. but I get the error in the title when I try to load my home page. I'm trying to get my home page to render conditionally depending on if the user is logged in or not.

Here is the component:

import React, { Component } from 'react';
import { Header } from 'semantic-ui-react';

class Home extends Component {

  homePage = () => {
    debugger 
    const { user } = this.props;
    if (user.id) {
      return (
        <div>
          <div>Games</div>
          <div>Sessions</div> 
          <div>Friends</div>
          <div>Tools</div> 
          <div>Help</div>
          <div>Settings</div>
          <div>Profile</div>
        </div>
      );
    }
    return (
      <div>
        <Header as='h1' textAlign='center'>Welcome to Board Game Tracker</Header>
        <Header as='h2' textAlign='center'>Please Log In or Register</Header>
      </div>
    );
  }

  render() {
    return (
      <div>
        { this.homePage() }
      </div>
    );
  }
}

const mapStateToProps = state => {
  return { user: state.user };
};

export default Home;

It's been a while since I started a new app from the ground up and am probably missing something extraordinarily basic.

Here is the error in full:

×
TypeError: Cannot read property 'id' of undefined
Home._this.homePage
src/components/Home.js:9
   6 | homePage = () => {
   7 |   debugger 
   8 |   const { user } = this.props;
>  9 |   if (user.id) {
  10 |     return (
  11 |       <div>
  12 |         <div>Games</div>
View compiled
Home.render
src/components/Home.js:33
  30 | render() {
  31 |   return (
  32 |     <div>
> 33 |       { this.homePage() }
  34 |     </div>
  35 |   );
  36 | } 

And finally the terminal error:

Started GET "/api/auth/validate_token" for 127.0.0.1 at 2018-10-18 09:22:43 -0600
Processing by DeviseTokenAuth::TokenValidationsController#validate_token as HTML
/Users/michellegarcia/personal_projects/board_game_app/app/controllers/application_controller.rb:6: warning: already initialized constant ApplicationController::NameError
/Users/michellegarcia/personal_projects/board_game_app/app/controllers/application_controller.rb:6: warning: previous definition of NameError was here
uninitialized constant ApplicationController::Api
  User Load (3.7ms)  SELECT  "users".* FROM "users" WHERE "users"."uid" = $1 LIMIT $2  [["uid", "test@test.com"], ["LIMIT", 1]]
  ↳ /Users/michellegarcia/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/activerecord-5.2.1/lib/active_record/log_subscriber.rb:98
   (0.3ms)  BEGIN
  ↳ /Users/michellegarcia/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/activerecord-5.2.1/lib/active_record/log_subscriber.rb:98
  User Load (1.3ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 LIMIT $2 FOR UPDATE  [["id", 1], ["LIMIT", 1]]
  ↳ /Users/michellegarcia/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/activerecord-5.2.1/lib/active_record/log_subscriber.rb:98
  User Update (1.5ms)  UPDATE "users" SET "tokens" = $1, "updated_at" = $2 WHERE "users"."id" = $3  [["tokens", "{\"8ruFDYLiKIRAhTy1Cc0tnw\":{\"token\":\"$2a$10$3UtLDmi5ljtUJOfKwzx.y.njRRkZiFNoyYOBi35FGL6RxkHcsBHye\",\"expiry\":1541085763,\"last_token\":\"$2a$10$OiJjztMk7.bYuWxgwHKYmewx8T5xO00IM6iaLxQ/pMAsSdNwagy9W\",\"updated_at\":\"2018-10-18T09:22:43.556-06:00\"}}"], ["updated_at", "2018-10-18 15:22:43.659159"], ["id", 1]]
  ↳ /Users/michellegarcia/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/activerecord-5.2.1/lib/active_record/log_subscriber.rb:98
   (8.3ms)  COMMIT
  ↳ /Users/michellegarcia/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/activerecord-5.2.1/lib/active_record/log_subscriber.rb:98
Completed 200 OK in 289ms (Views: 1.6ms | ActiveRecord: 15.1ms)


Started GET "/%3Canonymous%3E" for 127.0.0.1 at 2018-10-18 09:22:46 -0600
Processing by StaticController#index as */*
  Parameters: {"other"=>"<anonymous>"}
Completed 500 Internal Server Error in 186ms (ActiveRecord: 0.0ms)



ActionView::MissingTemplate (Missing template Users/michellegarcia/personal_projects/board_game_app/public/index.html with {:locale=>[:en], :formats=>[:html, :text, :js, :css, :ics, :csv, :vcf, :vtt, :png, :jpeg, :gif, :bmp, :tiff, :svg, :mpeg, :mp3, :ogg, :m4a, :webm, :mp4, :otf, :ttf, :woff, :woff2, :xml, :rss, :atom, :yaml, :multipart_form, :url_encoded_form, :json, :pdf, :zip, :gzip], :variants=>[], :handlers=>[:raw, :erb, :html, :builder, :ruby]}. Searched in:
  * "/Users/michellegarcia/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/railties-5.2.1/lib/rails/templates"
  * "/Users/michellegarcia/personal_projects/board_game_app"
  * "/"
):

app/controllers/static_controller.rb:7:in `index'

Postgres is definitely on and I definitely have a user.

Thanks in advance!

Answer 1

It looks like you might need to connect your home component to redux store?

import { connect } from 'react-redux';

export default connect(mapStateToProps)(Home);