title: Undefined props in componentDidMount
body: <p>This is starting to get really frustrating. Basically, I cannot access <code>props</code> in my subcomponents. if I try to render them directly using <code>this.props</code>- it works, but if I need to do additional processes with them, or save them into <code>state</code>, I get undefined props all the time.  I have a parent component, which looks something like this:</p>
  
  <pre><code>import React from 'react';
  
  import Title from './EventSubComponents/Title';
  import SessionInfo from './EventSubComponents/SessionInfo';
  import SessionTime from './EventSubComponents/SessionTime';
  import Location from './EventSubComponents/Location';
  import Subscribers from './EventSubComponents/Subscribers';
  
  class EventNode extends React.Component {
  
    constructor(props) {
      super(props);
      this.state = {
        'event': [],
      }
    }
  
    componentDidMount() {
      this.getEvent(this.props.location.selectedEventId);
    }
  
    getEvent(eventId) {
      fetch('/api/v.1.0/event/' + eventId, {mode: 'no-cors'})
        .then(function(response) {
          if(!response.ok) {
            console.log('Failed to get single event.');
            return;
          }
          return response.json();
        })
        .then((data) =&gt; {
          if (!data) {
            return;
          }
          this.setState({
            'event': data
          })
        });
    }
  
    render() {
      return(
        &lt;div className="event-wrapper"&gt;
          &lt;Title 
          title = { this.state.event.title } 
          date = { this.state.event.start }
          /&gt;
          &lt;SessionInfo 
            distance = { this.state.event.distance }
            type = { this.state.event.type }
          /&gt;
          &lt;SessionTime 
            start = { this.state.event.start }
            end = { this.state.event.end }
          /&gt;
          &lt;Location location = { this.state.event.start_location }/&gt;
          &lt;Subscribers 
          subscribers = { this.state.event.subscribers } 
          eventId = { this.state.event._id }
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default EventNode;
  </code></pre>
  
  <p>And my sub-component <code>SessionTime</code>, which looks like this:</p>
  
  <pre><code>import React from 'react';
  import moment from 'moment';
  
  class Title extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        'title': '',
        'date': '',
      }
    }
  
    componentDidMount() {
      console.log(this.props.title);
      console.log(this.props.date);
      // undefined both props.
      this.convertToTitleDate(this.props.date);
      this.setState({
        'title': this.props.title
      })
    }
  
    convertToTitleDate(date) {
      var newDate = moment(date).format('dddd, Do MMMM')
      this.setState({
        'date': newDate,
      });
    }
  
    render() {
      return (
        &lt;div className="event-title-wrapper"&gt;
          &lt;h1&gt; { this.state.title } &lt;/h1&gt;
          &lt;div className="event-title-date"&gt; { this.state.date } &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Title;
  </code></pre>
  
  <p>Could anyone explain, why both <code>this.props.date</code> and <code>this.props.title</code> are undefined in my <code>componentDidMount</code> function? I have couple more components in my <code>EventNode</code> and I have the same problems in them as well. </p>
  
  <p>Changing <code>componentDidMount</code> to <code>componentWillMount</code> does not help. I am fairly certain I have problems in my parent <code>EventNode</code> component, but I cannot figure out where. Inside <code>EventNode</code> <code>render()</code> all the state variables are defined.</p>