form FormFieldError.tsx

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44 112x
112x
 
112x
 
 
 
 
 
 
112x
1288x
1288x
 
1288x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1288x
1534x
 
 
 
 
 
 
 
112x
  import { ErrorMessage } from 'formik';
import React, { memo, useCallback, FunctionComponent } from 'react';
 
import { FormContext } from './FormProvider';
 
export interface FormFieldErrorProps {
    name: string;
    testId?: string;
}
 
const FormFieldError: FunctionComponent<FormFieldErrorProps> = ({
    name,
    testId,
}) => {
    const renderMessage = useCallback((message: string) => (
        <ul
            className="form-field-errors"
            data-test={ testId }
        >
            <li className="form-field-error">
                <label
                    className="form-inlineMessage"
                    htmlFor={ name }
                >
                    { message }
                </label>
            </li>
        </ul>
    ), [
        name,
        testId,
    ]);
 
    return <FormContext.Consumer>
        { ({ isSubmitted }) => isSubmitted &&
            <ErrorMessage
                name={ name }
                render={ renderMessage }
            /> }
    </FormContext.Consumer>;
};
 
export default memo(FormFieldError);