import * as React from 'react' ; import { TextField as TextFieldMUI } from '@material-ui/core' ; import { useFormSetValue } from 'relay-forms' ; import { useCallback } from 'react' ; function validate ( value ) { if ( value && value . length < 5 ) { return ' wrong length, minimum 5 current ' + value ; } return undefined ; } type TextFieldProps = { placeholder : string ; fieldKey : string ; initialValue ? : string ; } ; export const TextField = ( { placeholder , fieldKey , initialValue } ) => { const [ { error } , setValue ] = useFormSetValue ( { key : fieldKey , validate , initialValue , validateOnChange : true , } ) ; const setValueCallback = useCallback ( ( event ) => { const value = event . target . value ; setValue ( value ) ; } , [ setValue ] ) ; return ( < > { error && < div > { error } < /div>} < TextFieldMUI defaultValue = { initialValue } placeholder = { placeholder } onChange = { ( value ) => setValueCallback ( value ) } /> < />); } ;