title: Getting a child's default props to set the state in the parent in ReactJS
body: <p>Similar to <a href="https://stackoverflow.com/questions/22639534/">Pass props to parent component in React.js</a> but I am only interested in getting the child component's <em>default</em> props into the parent.</p>
  
  <p>So why would I need to do that?</p>
  
  <p>Well, I have a parent component that renders a child component containing an HTML form.  The parent's render() method passes its state data down to the child as props, as it should.</p>
  
  <p>Initially, the child form should contain some default data only.  And it makes sense for that data to be taken from the defaultProps defined in the child component.  After all, I don't want to be setting up a load of default data in the parent's state for the sole purpose of passing it down to the child as default props.  The parent should not need to define the child's default props.  The child should know what its own default props are.</p>
  
  <p>So in my initial parent render(), I leave my state as undefined.  When this gets passed down to the child as undefined props, the child will use its defaultProps instead.  This is just what I want.</p>
  
  <p>Time passes...</p>
  
  <p>Now the user changes a field on a child component's form.  I pass that change back up the parent via a callback function for it to recalculates the parent's new state.  I then call a <code>setState()</code> in the parent to re-render all the child components as normal.</p>
  
  <p>The problem is that I need my parent's state to be an object, containing further nested objects, and am using the [React Immutability Helpers][1] to calculate the new state in the parent, like so:</p>
  
  <pre><code>handleFormFieldChange(e) {
  // reactUpdate imported from 'react-addons-update'
   var newState = reactUpdate(this.state, {
      formData: {values: {formFieldValues: {[e.currentTarget.name]: {$set: e.currentTarget.value}}}}
      });
      this.setState(newState);
  }
  </code></pre>
  
  <p>The first time this code runs, it will throw an error because it's attempting to update the state values and there is no state to update.  (I left it undefined, remember!)</p>
  
  <p>If I attempt to get around this by setting up a default initial state to an empty object (each with nested empty objects) I run into a catch-22.  On the first render, these empty values will get passed down the child as empty props, so overriding the defaultProps that I set up for the child component.  Bummer!</p>
  
  <p>So as far as I can see, I need a sensible initial state to pass down to the child component, but without (re)defining the whole thing again in the parent.  So in this case, I think it would make sense to pull the child's defaultProps into the parent, just in order to set the parent's initial state.</p>
  
  <p>I have a way of doing this, which I will post later on.  But before I do that, does anybody have a better way of doing this?  One that would avoid having to pass the defaultProps from the child to the parent at all?</p>