unexpected value from getValue() in custom input example

[chuan137]

Hello,

Here is my code, <TextField/> is from material ui. The problem is that, the input field shows the field name as default value. The behaviour of getValue(field, '') is not expected. I use getValue() || '' as a work around, which works fine.

but it would be nice to find out why the behaviour, thanks.

import { Form, FormInput } from 'react-form';
const InputField = ({field, ...rest}) => {
  return (
    <FormInput field={field}>
      {({setValue, getValue}) => {
        
        console.log(field);    /* field is 'email' */
        console.log(getValue(field, ''));   /* expect empty string on initial, but 'email' is logged */  

        return  (
          <TextField 
            value={getValue(field, '')}
            onChange={(e,v) => setValue(v)}
            {...rest} />
        )
       }}
    </FormInput>
  );
}

[mintyPT]

Same issue here. Did you found your problem?

[tannerlinsley]

Remember, when getValue is used inside a FormInput or anywhere that a field prop is passed, it is automatically bound to that field. So you would simply call getValue(defaultValue) instead of getValue(field, defaultValue).