How do I set initial value for radio button in redux-form?

Question

I'm using the Field-component and setting type=radio and in the component rendering the input I have set checked={props.input.value}. The group currently contains 2 radio buttons, but 1 more will soon be added. I have added initialValues: { method (name of radio button): '201' (value of the one I want checked initially) } to the reduxForm wrapper.

My problem is that when I use the settings mentioned above, the last radio button in the group gets checked initially, but I want to be able to control which radio button that will initially be checked.

Code that renders the input:

export const RadioButton = props => {
    return (
        <div className="booking-radio-container">
            {props.meta.touched &&
                ((props.meta.error && <label className="errorCheck"> 
                    {props.meta.error}</label>) ||
                    (props.meta.warning && <label>{props.meta.warning} 
            </label>))}
            <label className="container" onClick={() => 
              props.changeFunc(props.input.value)}>
                {props.label}
                <input {...props.input} type={props.type} checked= 
                {props.input.value}  />
                <span className="checkmark" />
            </label>
        </div>
);
}

The Field:

<FormSection name="paymentMethod">
    <Field
        name="method"
        label="Creditcard"
        component={RenderRadio}
        type="radio"
        changeFunc={this.props.selectPaymentMethod}
        icon={CreditIcon}
        value="201"
    />
    <Field
        name="method"
        label="Invoice"
        component={RenderRadio}
        type="radio"
        changeFunc={this.props.selectPaymentMethod}
        icon={InvoiceIcon}
        value="101"
    />
</FormSection>

The redux-form wrapper:

reduxForm({
        form: 'bookingForm1',
        enableReinitialize: true,
        validate: ValidateContact,
        asyncValidate: AsyncValidate,
        asyncBlurFields: ['ContactForm.email'],
        initialValues: {
            method: '201'
        }
    })

So, what I want is for the credit card option to be checked initially, regardless of where it is in the list of fields, but if the user clicks on another option it should be set as checked.

I have tried using defaultChecked, but if i clicked the other option it would revert to credit card.

Right now with the setup described above, I can't check the other option, but if i click the checked option it swithces to the unchecked one and the back again.

How do I set initial value for radio button in redux-form?

0 Answers0