title: React warning uncontrolled component in child component
body: <p>I have child form and input components that are rendered within a parent project component. In the parent component, they are "uncontrolled" as in their value isn't initially set by the parent project's state. Their value is set by the form component state immediately. React keeps giving me this "Warning" (which registers as an error in the console). </p>
  
  <pre><code>Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.
  </code></pre>
  
  <p>I understand the issue with controlled vs non controlled components. But how do I get React to see that the child is controlling the input rather than the parent and stop giving me this error?</p>
  
  <p>Other relevant info: this is an external forms module that I created because my apps use a lot of forms and I wanted a standardized way to  implement this with just an "npm install ...". This is the sudo code</p>
  
  <pre><code>    &lt;Parent project module&gt;
      //external forms components
      &lt;Form&gt;
      &lt;Input/&gt;
      &lt;Input/&gt;
      &lt;Button/&gt;
      &lt;/Form&gt;
      //end external forms components
      &lt;/Parent project module&gt;
  </code></pre>
  
  <p>Here is the render method in the Form component that allows me to control the Input state from withing the Form component. Please let me know if other code snippets or other info would be helpful. Am I going about this incorrectly or is there some way to get rid of these errors? Everything works fine, but it clutters my console and makes it difficult to code.</p>
  
  <pre><code>render() {
      const inputs = React.Children.map(this.props.children, child =&gt;
          React.cloneElement(child, {
              value: this.state.value,
              onChange: this.onChange,
              error: this.state.userNotify[child.props.name]
          })
      );
  
      return (
          &lt;div id="form-container"&gt;
              &lt;p className="formTitle"&gt;{this.props.formTitle}&lt;/p&gt;
              &lt;form id={this.props.formID} onSubmit={this.onSubmit} &gt;
                  {inputs} {/*there must be nested input components passed in*/}
              &lt;/form&gt;
          &lt;/div&gt;
      )
  };
  </code></pre>