To make the user experience more intuitive, let's disable the Register button until both the email and password fields are valid. To do that, we need to provide a way for the RegistrationForm component to not just read the values of the Input components when the form is submitted, but after each time the value has changed.
A naive approach would be to poll the valid state of each component every 100 ms or so, but that will not be performant. Instead, we can pass a function (via the onChange prop) into the Input component that will get called whenever the value of the Input changes.
<Input label="Email" type="email" ref={this.email} onChange={this.handleInputChange} /><Input label="Password" type="password" ref={this.password} ...
