Is This A Controlled Or Uncontrolled React Component?

I read the answers on this question but none is similar to my set up: What are controlled components and uncontrolled components? I have a parent component and many children as inp

Solution 1:

If I understand your setup correctly, your inputs are uncontrolled, because their state is held in the DOM rather than in React state. Validation is a separate concern, which can happen synchronously or asynchronously. You can let React state hold the values whatever you do for validation. Note that most of the time you don't want to prevent the input from even having an invalid value - you just want to ensure that the user can't submit the form while the values are invalid. Thus you can have an onChange handler to set some value on state as in the following:

<input type="text" 
  value={this.state.myValue} 
  onChange={val => this.setState({myValue: val}, 
    ()=> this validateMyValue(this.state.myValue))}} />

this.validateMyValue could be asynchronous, and do whatever is required if validation fails. That would be a controlled component doing what you want.