title: React this.props is null
body: <p>I have the following: </p>
  
  <pre><code>import React from 'react';
  import {render} from 'react-dom';
  
  class TShirt extends React.Component {
      render () {
          return &lt;div className="thsirt"&gt;{this.props.name}&lt;/div&gt;;
      }
  }
  
  class FirstName extends React.Component {
      propTypes: {
          name: React.PropTypes.string.isRequired
      }
      constructor(props) {
          super(props);
          this.state = {
              submitted: false
          };
      }
      getName () {
          var name = this.refs.firstName.value;
          this.setState(function() {
            this.props.action(name);
          });
      }
      handleSubmit (e) {
          e.preventDefault();
          this.setState({ submitted: true }, function() {
              this.props.actionNav('color');
          });
      }
      render () {
          if(!this.state.submitted){
              return (
                  &lt;div&gt;
                      &lt;h2&gt;tell us your first name&lt;/h2&gt;
                      &lt;form&gt;
                          &lt;input 
                              type="text"
                              ref="firstName"
                              onChange={this.getName.bind(this)}
                          /&gt;
                          &lt;div className="buttons-wrapper"&gt;
                              &lt;a href="#"&gt;back&lt;/a&gt;
                              &lt;button onClick={this.handleSubmit.bind(this)}&gt;continue&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              );
          }
          else {
               return &lt;PickColor color={this.props.colorVal} /&gt;;
          }
      }
  }
  
  class Link extends React.Component {
      setActiveClass () {
          if(this.props.el == this.props.activeClass){
              return 'active';
          }
      }
      render () {
          var active = this.setActiveClass();
          return (
              &lt;li className={active}&gt;{this.props.el}&lt;/li&gt;
          );
      }
  }
  
  class Nav extends React.Component {
      render () {
          var links = ['name', 'color', 'design', 'share'],
              newLinks = [],
              that = this;
          links.forEach(function(el){
              newLinks.push(&lt;Link activeClass={that.props.active} key={el} el={el} /&gt;);
          });
          return (
              &lt;ul&gt;
                  {newLinks}
              &lt;/ul&gt;
          );
      }
  }
  
  class PickColor extends React.Component {
      getColorValue(event) {
          console.log(event.target.getAttribute("data-color"));
          console.log(this);
          //this.props.color(event.target.getAttribute("data-color"));
      }
      render () {
          var colors = ['red', 'purple', 'yellow', 'green', 'blue'],
              colorsLink = [],
              that = this;
  
          colors.forEach(function(el){
              colorsLink.push(&lt;li data-color={el} key={el} onClick={that.getColorValue} ref={el}&gt;{el}&lt;/li&gt;);
          });
  
          return (
              &lt;ul&gt;
                  {colorsLink}
              &lt;/ul&gt;
          );
      }
  
  }
  
  class App extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              name: '',
              color: '',
              active: ''
          };
          this.getName = this.getName.bind(this);
          this.setActiveNav = this.setActiveNav.bind(this);
          this.setColor = this.setColor.bind(this);
      }
      getName (tshirt) {
          this.setState({ name:tshirt })
      }
      setActiveNav (active) {
          this.setState({ active:active })
      }
      setColor (color) {
          this.setState({ color:color })
      }
      render () {
          return (
              &lt;section className={this.state.color}&gt;
                  &lt;Nav active={this.state.active} /&gt;
                  &lt;TShirt name={this.state.name} /&gt;
                  &lt;FirstName name={this.state.name} action={this.getName} actionNav={this.setActiveNav} colorVal={this.setColor} /&gt;
              &lt;/section&gt;
          );
      }
  }
  
  render(&lt;App/&gt;, document.getElementById('app'));
  </code></pre>
  
  <p>Inside the "PickColor" component I am trying to do this:</p>
  
  <pre><code>getColorValue(event) {
      console.log(event.target.getAttribute("data-color"));
      console.log(this);
      //this.props.colorVal(event.target.getAttribute("data-color"));
  }
  </code></pre>
  
  <p>however this is returning null on click so I can't go ahead ans use:</p>
  
  <p>this.props.colorVal</p>