title: I am unable to set default values for the props in child component in reactjs
body: <p>I have a parent component called "Component_A" and i have a child component "Component_B". I am trying to get data from server in the parent component and pass it down to child component as props. But my props will not have values in it before i make the ajax call in "componentDidMount" function in parent "Component_A". So i am trying to set defaultProps in child component "Component_B" using the "getDefaultProps". But looks like it doesnt work!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var Component_A = React.createClass({
          componentDidMount : function(){
              //Get data from server and set it in state variable called "data"
          },
          render : function(){
              return (
                  &lt;ComponentB sampleData={this.state.data} /&gt;
              )
          }
      })
  
      var ComponentB = React.createClass({
          getDefaultProps : function (){
              return {
                  data : {
                    vehicle : {
                        make :{
                           name : "Ford"
                        },
                        model : {
                           name : "Focus"
                        }
                    }
                  }
              }
          },
          render : function(){
              return (
                   &lt;div&gt; {this.props.data.vehicle.make.name} &lt;/div&gt;
              )
          }
      })</code></pre>
  </div>
  </div>
  </p>
  
  <p>when i load the page, i get "Uncaught TypeError: Cannot read property 'make' of undefined"</p>