title: React - Using Props outside of Render
body: <p>I am trying to post a UserId to a database but the Id is passed as a prop. When I enter this.props.userId within the render method, it displays the desired information however when I try to incorporate it into a function above the render function I get null. I have spent hours reviewing other postings and trying what feels like everything I can to no avail. </p>
  
  <p><strong>App.js Code</strong></p>
  
  <pre><code>import axios from 'axios'
  import {
    BrowserRouter as Router,
    Route,
    Redirect,
  } from 'react-router-dom'
  import Home from "./pages/Home";
  import MyEvents from "./pages/MyEvents"
  import Signup from "./pages/Signup";
  import Login from "./pages/Login";
  import Navbar from "./components/Navigation/Navigation";
  import "./App.css"
  
  
  class App extends Component {
    constructor() {
      super()
      this.state = {
        loggedIn: false,
        username: null,
        userId: null,
      }
  
      this.getUser = this.getUser.bind(this)
      this.componentDidMount = this.componentDidMount.bind(this)
      this.updateUser = this.updateUser.bind(this)
    }
  
    componentDidMount() {
      this.getUser()
    }
  
    updateUser (userObject) {
      this.setState(userObject)
    }
  
    getUser() {
      axios.get('/api/users/').then(response =&gt; {
        console.log('Get user response: ')
        console.log(response.data)
        if (response.data.user) {
          console.log('Get User: There is a user saved in the server session: ')
  
          this.setState({
            loggedIn: true,
            username: response.data.user.username,
            userId: response.data.user._id
          })
        } else {
          console.log('Get user: no user');
          this.setState({
            loggedIn: false,
            username: null,
            userId: null
          })
        }
      })
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
  
          &lt;Navbar updateUser={this.updateUser} loggedIn={this.state.loggedIn} /&gt;
          {/* greet user if logged in: */}
          {this.state.loggedIn &amp;&amp;
            &lt;p&gt;You are logged in, {this.state.username}, userId: {this.state.userId}!!!!&lt;/p&gt;
          }
          {/* Routes to different components */}
          &lt;Route
            exact path="/home"
            render = {() =&gt; 
              &lt;Home userId = {this.state.userId} /&gt;
            }
            /&gt;
  </code></pre>
  
  <p><strong><em>Home.js Code</em></strong></p>
  
  <pre><code>import React, { Component } from "react";
  import API from "../utils/API";
  class Events extends Component {
    state = {
      events: [],
      search: "",
      selector: "",
      input:""
      };
  
  
    attendEvent = show =&gt; {
      API.attendConcert({
        userId: this.props.userId,
        concertId: show.id,
        artist: show.performance[0].artist.displayName,
        venue: show.venue.displayName,
        date: show.start.date,
        time: show.start.time,
        city: show.venue.metroArea.displayName,
        latitude: show.venue.lat,
        longitude: show.venue.lng,
      })
      .then(res =&gt; window.location.href = "/concerts/" + res.data._id)
      .catch(err =&gt; console.log(err))
    }
  
    handleRadioChange = event =&gt; {
      this.setState({
        selector: event.target.value
      });
    }
  
  
    render() {
      return (&lt;&gt;
        &lt;Container&gt;
          &lt;Row&gt;
            &lt;Col size="md-12"&gt;
  &lt;p&gt;Hi {this.props.userId}&lt;/p&gt;
  </code></pre>
  
  <p><strong>API.JS Code</strong></p>
  
  <pre><code>import axios from "axios";
  
  export default {
      attendConcert: function(eventData) {
          return axios.post("/api/concerts", eventData);
      },
      getConcert: function(id) {
          return axios.get("/api/concerts/" + id);
      }
  }
  </code></pre>
  
  <p>Note: some lines of code were removed to reduce the amount of code being presented but should one desire to see everything please let me know. </p>