Redux Form, Radio Button Fields, how to support variable values?

Question

In my react redux form, I have the following:

        <fieldset className="form-group">
          <legend>Radio buttons</legend>
          {this.props.job_titles.map(jobTitle => (
          <div className="form-check" key={jobTitle.id}>
            <label className="form-check-label">
              <Field
                name="job_title_id"
                component="input"
                type="radio"
                value={jobTitle.id}
              />
              {' '}
              {jobTitle.title}
            </label>
          </div>
          ))}
        </fieldset>

This renders the radio buttons correctly, but when you click to select a radio button, the radio button never sets as selected. You can't select an option - the form is broken.

What's strange is if I update: value={jobTitle.id} to value="anything" then the radio buttons can be selected.

I'm not seeing anything in the redux form docs about radio buttons dynamically generated. What am I doing wrong?

Thanks

Answer 1

Set the checked property to a state or prop, then update that in the click handler.

<Field
    onClick={
        () => {
            this.setState((prevState) => {
                return {isChecked: !prevState.isChecked};
            });
        }
    }
    name="job_title_id"
    component="input"
    type="radio"
    checked={this.state.isChecked}
    value={jobTitle.id}
/>

Answer 2

Convert value to String:

<Field
            name="job_title_id"
            component="input"
            type="radio"
            value={jobTitle.id.toString()}
          />