Redux-form fields set with default values recognized as empty

[Angelk90]

Hi @winit30 , if I try to set an input field with default values and then execute handleSubmit, it tells me that the input fields are empty, even if they are not empty but set with default values.

[winit30]

How did you set default values

On Mon, 15 Jul 2019, 10:11 pm Angelk90, notifications@github.com wrote:

Hi @winit30 https://github.com/winit30 , if I try to set an input field with default values and then execute handleSubmit, it tells me that the input fields are empty, even if they are not empty but set with default values.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/winit30/react-native-tutorial/issues/2?email_source=notifications&email_token=AD7JMZNF3J4KZOL677CEGBLP7SSB5A5CNFSM4IDYWHE2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4G7ISYLQ, or mute the thread https://github.com/notifications/unsubscribe-auth/AD7JMZP5UHEODRBRNMSJCS3P7SSB5ANCNFSM4IDYWHEQ .

[Angelk90]

Login:

renderTextInput = field => {
    const {
      meta: { touched, error },
      defaultValue,
      label,
      secureTextEntry,
      iconPassword,
      maxLength,
      keyboardType,
      placeholder,
      input: { onChange, ...restInput },
    } = field;

    return (
      <View>
        <InputText
            defaultValue={defaultValue}
          onChangeText={onChange}
          maxLength={maxLength}
          placeholder={placeholder}
          keyboardType={keyboardType}
          secureTextEntry={secureTextEntry}
          iconPassword={iconPassword}
          label={label}
          {...restInput}
        />
        {touched && error && (
          <HelperText type="error" visible={true}>
            {error}
          </HelperText>
        )}
      </View>
    );
  };
...
          <Field
            defaultValue="email@email.com"
            name="email"
            label="Email"
            placeholder="Email@host.com"
            component={this.renderTextInput}
          />

InputText.js: Link

If I try to use the value nomenclature instead of defaultValue, it doesn't work.

[winit30]

Hey Angelk90

The way you are doing will not work for redux form. you have to set initial values from the props.

Please refer the documentation provided below

https://redux-form.com/7.4.2/examples/initializefromstate/

you have to do something like below in your code to set the initial values

const mapStateToProps = (state, ownProps) => ({
    initialValues: ownProps.isEditAddress ? state.deliveryAddress.address : {}
});

"initialValues" comes from the redux form so you need not care about it. simply pass your data object and it will work perfectly.

One more example:

const validateInitialValues = (values) => {
    if(values) {
      return {
        ...values,
        mobile: values.mobile ? values.mobile+"" : "",
        games: {
            mobile_legends_id: values.games ? values.games.mobile_legends_id+"" : "",
            pubg_user_id: values.games ? values.games.pubg_user_id+"" : ""
        }
      }
    }
    return {};
}

mapStateToProps = (state) => ({
    initialValues: validateInitialValues(state.userReducer.getUser.userDetails),
});

In your case refer to the code below:

mapStateToProps = (state) => ({
    initialValues: {email: "example@someemail.com"}
});

I have simply passed the default object for your understanding but conventionally it should come from redux.

[Angelk90]

@winit30 : You could put this in the next video. P.s. When the next videos come out, I wait for them with much anticipation.

[winit30]

Sure

[Angelk90]

@winit30 : Is there any news about when the next videos will be released?