title: ReactJS: where to put validation logic in a form with "nested" composite components?
body: <p>I'm new to ReactJS and am unsure about the best place to put validation logic that is needed both by nested child components in my form, and the overall "parent" form component itself. Here is a over-simplified example that illustrates my question...</p>
  
  <p>I have a object like this that represents a pet owner:</p>
  
  <pre><code>{
    name: 'Jon Arbuckle',
    pets: [
     { name: 'Odie', type: 'dog' },
     { name: 'Garfield', type: 'cat' }
    ]
  }
  </code></pre>
  
  <p>I'm using a composite component called <code>&lt;PetOwnerForm&gt;</code> to render a form for editing this data. <code>&lt;PetOwnerForm&gt;</code> renders something like this:</p>
  
  <pre><code>&lt;input type="text" value={name} /&gt;
  &lt;PetList value={petOwner.pets} /&gt;
  </code></pre>
  
  <p><code>&lt;PetList&gt;</code> is a composite component that renders this:</p>
  
  <pre><code>&lt;PetListItem value={this.props.value[i]} /&gt;  // Render this for each pet...
  // buttons for adding/deleting pets
  </code></pre>
  
  <p><code>&lt;PetListItem&gt;</code> renders something like this:</p>
  
  <pre><code>&lt;input type="text" value={this.props.value.name} /&gt;
  &lt;PetTypePicker value={this.props.value.type} /&gt;
  </code></pre>
  
  <p>Lastly, <code>&lt;PetTypePicker&gt;</code> renders a <code>&lt;select&gt;</code> with <code>&lt;option&gt;</code>s for pet types.</p>
  
  <p><code>&lt;PetTypePicker&gt;</code> needs to know how to validate the selected type so it can display an inline error message (e.g., ensure that a value is selected).</p>
  
  <p>However, <code>&lt;PetOwnerForm&gt;</code> also needs to know how to validate the pet type because it needs to know how to validate the entire object (on load, each time  the form is updated, and before submitting the data back to the server). If any field is invalid, the "Save" button should be disabled.</p>
  
  <p>So where, for example, should the "is a valid pet type selected?" logic go? (Bear in mind that this is a trivial example; in reality I have many fields like this and nested composite components).</p>
  
  <p>The options I see so far are:</p>
  
  <p><strong>A)</strong> Replicate the validation logic for pet type (or whatever field) both in <code>&lt;PetOwnerForm&gt;</code> and <code>&lt;PetTypePicker&gt;</code>. This might just be a matter of calling the same, shared validation function in both places:</p>
  
  <pre><code>//PetOwnerForm.js:
  validate(petOwnerObj) {
    Util.isPetTypeValid(petOwnerObj.pets[i]) // for each pet
    // validate the other properties in petOwnerObj...
  }
  
  //PetTypePicker.js:  
  validate(petType) {
    Util.isPetTypeValid(petType)
  }
  </code></pre>
  
  <p><strong>B)</strong> Use custom PetOwner, Pet, and PetType models that have their own validators. This way you can always ask a model to validate itself, regardless of where it is. Maybe this would look something like this:</p>
  
  <pre><code>{
    name: { value: 'Jon Arbuckle', isValid: ()=&gt;{...} },
    pets: [
    {
      name: { value: 'Garfield', isValid: ()=&gt;{...} },
      type: { value: 'cat', isValid: ()=&gt;{...} }
     },
     ...
    ]
  }
  </code></pre>
  
  <p><strong>C)</strong> Modify PetOwnerForm.js go recurse the pet owner object, validating each value, and setting an 'errors' property that child components can reference, resulting in an object like this:</p>
  
  <pre><code>{
    name: { value: 'Jon Arbuckle asdfasdfasdf^^', errors: ['Too many characters', 'Contains invalid character']] },
    pets: [
      {
        name: { value: '', errors: ['Required value missing'] },
        type: { value: 'tree', errors: ['Invalid pet type'] }
      },
      ...
    ]
  }
  </code></pre>
  
  <p><strong>Which option is recommended for React apps (or is there another option)?</strong></p>