You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am rendering a text field, Email as an Higher Order Component (HOC) in a redux-form. It has the React Tooltip attached with it for showing errors. The weird thing is that there are 2 forms with this Email field. In one form, there are other text fields too. In other form, there is only one Email field. Now, the issue is as soon as I click inside this email field, I get a console error,
The error is generating from the React Tooltip code, as far as my understanding.
Here is the code of my component: Email Field emailField = ({ input, meta, ...props }) => { const emailError: string = props.required ? this.props.formErrors.emailError : ''; const hasError = emailError !== ''; return ( <TextInput name="cof-email" error={hasError ? emailError : ''} showLabel={true} labelCss="col-form-label" labelValue="Email" placeholder="Email" {...input} /> ); };
What can be the reason of this error? One more weird thing is that on first load of this form, there is no error. It comes only when I transition from other form to this form.
The text was updated successfully, but these errors were encountered:
Uh oh!
There was an error while loading. Please reload this page.
I am rendering a text field, Email as an Higher Order Component (HOC) in a redux-form. It has the React Tooltip attached with it for showing errors. The weird thing is that there are 2 forms with this Email field. In one form, there are other text fields too. In other form, there is only one Email field. Now, the issue is as soon as I click inside this email field, I get a console error,
The error is generating from the React Tooltip code, as far as my understanding.
Here is the code of my component:
Email Field
emailField = ({ input, meta, ...props }) => { const emailError: string = props.required ? this.props.formErrors.emailError : ''; const hasError = emailError !== ''; return ( <TextInput name="cof-email" error={hasError ? emailError : ''} showLabel={true} labelCss="col-form-label" labelValue="Email" placeholder="Email" {...input} /> ); };
TextInput Component
<div className={
form-group ${error ? 'has-error' : ''}}> {showLabel && label} <input type={type} id={inputId} name={name} className={controlClass} placeholder={placeholder} maxLength={maxLength as any} value={value} onChange={onChange} data-event="focus" data-event-off="blur" data-tip={error} onBlur={onBlur} /> <ReactTooltip place="top" type="error" effect="solid" /> </div>
Call to Email field rendering, conditional if the condition is true
{this.props.checkCondition && <Field name="email" component={this.emailField} required={this.props.required} />}
What can be the reason of this error? One more weird thing is that on first load of this form, there is no error. It comes only when I transition from other form to this form.
The text was updated successfully, but these errors were encountered: