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
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}
/>