import React from 'react' ; import * as Styled from './FormikTextField.styles' ; import { FieldHookConfig , useField } from 'formik' ; import { MdInfoOutline } from 'react-icons/md' ; export type Props = { type : string ; placeholder : string ; } & FieldHookConfig < string > ; function param { string } placeholder param { string } type param { props } props returns { JSX . Element } const FormikTextField = ( { placeholder , type , ... props } ) : JSX . Element => { const [ field , meta ] = useField < string > ( props ) ; const errorText = meta . error && meta . touched ? meta . error : '' ; return ( < Styled . Container > < Styled . Input type = { type } hasError = { ! ! errorText } { ... field } /> < Styled . Label htmlFor = { field . name } hasValue = { field . value !== '' } > { placeholder } < /Styled.Label> < Styled . Error hasError = { ! ! errorText } > < MdInfoOutline className = "icon" / > { errorText } < /Styled.Error> < /Styled.Container>); } ; export default FormikTextField ;