question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug? Radio button field.input value === undefined all the time

See original GitHub issue

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!

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:4
  • Comments:18 (1 by maintainers)

github_iconTop GitHub Comments

24reactions
FKSIcommented, May 25, 2017

@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.

1reaction
erikrascommented, May 5, 2017

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

Edit Redux Form - Simple Example

Read more comments on GitHub >

github_iconTop Results From Across the Web

Bug? Radio button field.input value === undefined all the time
If i change my input type to text, i can get input.value when i set it to radio it becomes undefined again. Is...
Read more >
Radio button value returns undefined - jquery - Stack Overflow
It is strange since values are directly assigned with the proper method ,yet even alerted they are undefined.When i remove the value and...
Read more >
Uncaught TypeError: Cannot read property of null - iDiallo
We want to get the value of an input. var inputVal = document. ... every time i try to run this, it shows...
Read more >
Why is it impossible to deselect HTML "radio" inputs?
HTML 5.2 standard states all inputs should be unchecked if none has been marked checked: If none of the radio buttons in a...
Read more >
flutter_form_builder | Flutter Package - Pub.dev
This package helps in creation of forms in Flutter by removing the boilerplate code, reusing validation, react to changes, and collect final user...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found