redux-form: Bug? Radio button field.input value === undefined all the time

Hello Redux Form dev team.

I have a really funny question, i think i discovered a bug. Basicly when i start my form with the following values:

MyForm = reduxForm({
      name: '',
      startAt: '',
      endAt: '',
      isActive: true,
      milestones: []
})(MyForm)

It runs the action @@redux-form/INITIALIZE and i can verify that the my-form.values.isActive = true

but when i then render the input field:

// Render function
renderRadio = ({ input, type }) => {
    console.log(input.value); // this returns undefined even tho value is true in the store?
    return <input {...input} type={type} checked={input.value} />
  }

// Actual JSX
<Field name="isActive" component={this.renderRadio} type="radio" />

Is this a bug, or am i just completely missing something, happens now and then, i’ve already been looking on stack overflow and such and i should be doing it as described.

Cheers!

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 4
Comments: 18 (1 by maintainers)

Most upvoted comments

@Nopzen @status203 I made it work 👍

const radioButtonGenerator = (
  { input, type, options, meta: { touched, error, warning } }
) => (
  <div>
  {
    options.map(o =>
      <div className={classnames(['radio-container'])}>
        <label key={o.value} className={classnames(['radio'])}>
          <input
            className={classnames(['radio-dot'])}
            type='radio'
            {...input}
            value={o.value}
            checked={o.value === input.value}
          />
        </label>
        <span className={classnames(['radio-label'])}>
          {o.title}
        </span>
      </div>
    )
  }
  </div>
)

const RadioButton = ({ content, renderField }) => (
  <div className={classnames(['radio-buttons'])}>
    <Field
      component={radioButtonGenerator}
      name={content.id}
      id={content.id}
      options={content.options}
    />
  </div>
)

The trick seems to not set type in the Field props.

+24

FKSI on May 25, 2017

Radio buttons are done with one Field per input each with the same name prop. See the simple example:

erikras on May 5, 2017