Using redux-form I'm losing focus after typing the first character

Question

I\'m using redux-form and on blur validation. After I type the first character into an input element, it loses focus and I have to click in it again to continue

Answer 1

This happens because you're re-defining renderField as a new component every time you render which means it looks like a new component to React so it'll unmount the original one and re-mounts the new one.

You'll need to hoist it up:

const renderField = ({ input, label, type, meta: { touched, invalid, error } }) => (
      

        {label}
        
        

          {touched ? error: ''}
        
      
    );

class SignIn extends Component {

  ...

  render() {
    const { message, handleSubmit, prestine, reset, submitting } = this.props;


    return (
      

        

          

            

              Please sign in
            
            {this.renderAlert()}
            
            
            Sign In
          
        
        
    );
  }
}

...