import React from 'react' ; import { TextInput } from '@workday/canvas-kit-preview-react/text-input' ; import { space } from '@workday/canvas-kit-react/tokens' ; export const Error = ( ) => { const [ value , setValue ] = React . useState ( 'four' ) ; const [ hint , setHint ] = React . useState ( '' ) ; const [ hasError , setHasError ] = React . useState ( false ) ; const validateInput = ( value ) => { const stringLength = value . length ; if ( stringLength !== 3 ) { setHasError ( true ) ; const hintStart = 'Word length must be' ; setHint ( stringLength < 3 ? `${ hintStart } greater than 2` : `${ hintStart } less than 4` ) ; } else { setHasError ( false ) ; setHint ( '' ) ; } } ; React . useEffect ( ( ) => { validateInput ( value ) ; } , [ ] ) ; const handleChange = ( event ) => { validateInput ( event . target . value ) ; setValue ( event . target . value ) ; } ; return ( < TextInput hasError = { hasError } orientation = 'vertical' > < TextInput . Label > A three letter word < /TextInput.Label> < TextInput . Field onChange = { handleChange } value = { value } / > < TextInput . Hint paddingTop = { space . xxs } > { hint } < /TextInput.Hint> < /TextInput>); } ;