Unform

Clear input error on focus

Unform exposes a function called clearError within useField hook, so use it inside onFocus and it's done.

components/Input.js
1import React, { useRef, useEffect } from 'react';
2import { useField } from '@unform/core';
3
4export default function Input({ name, label, ...rest }) {
5 const inputRef = useRef(null);
6
7 const { ..., clearError } = useField(name);
8
9 useEffect(() => {
10 // ... registerField
11 }, []);
12
13 return (
14 <>
15 <input
16 ref={inputRef}
17 onFocus={clearError}
18 {...rest}
19 />
20
21 {error && <span className="error">{error}</span>}
22 </>
23 );
24}
Edit this page on GitHub