HTML + React: Radio button stuck on the one initially set as "checked"

Question

I have a set of two radio buttons one of which is checked when the page is loaded. It appears that I can't change it to the second one. The HTML is build by reactjs if that matters. The markup on chrome looks like:

<fieldset data-reactid=".0.0.0.0.0.0.1">
<label for="coop-radio-btn" data-reactid=".0.0.0.0.0.0.1.0">
    <span data-reactid=".0.0.0.0.0.0.1.0.0">To a Cooperative</span>
    <input type="radio" name="requestOnBehalfOf" value="coop" id="coop-radio-btn" data-reactid=".0.0.0.0.0.0.1.0.1">
</label>
<label for="union-radio-btn" data-reactid=".0.0.0.0.0.0.1.1">
    <span data-reactid=".0.0.0.0.0.0.1.1.0">Additional Request</span>
    <input type="radio" name="requestOnBehalfOf" value="union" checked="" id="union-radio-btn" data-reactid=".0.0.0.0.0.0.1.1.1">
</label>
</fieldset>

Marqueritemarques

You should share your react component code as well. You are probably using controlled components which reflect the value of value prop instead of user input: facebook.github.io/react/docs/forms.html#controlled-components – Heteronym

Answer 1

The reason for this was that React was making the inputs controlled components because the values for each input are set from the server side.

Quoting from Brandon's answer:

If you add a value={whatever} property to the input, which makes it a controlled component, then it is read-only uness you add an onChange handler that updates the value of whatever. From the React docs:

Why Controlled Components?

Using form components such as <input> in React presents a challenge that is absent when writing traditional form HTML. For example, in HTML:

<input type="text" name="title" value="Untitled" />

This renders an input initialized with the value, Untitled. When the user updates the input, the node's value property will change. However, node.getAttribute('value') will still return the value used at initialization time, Untitled.

Unlike HTML, React components must represent the state of the view at any point in time and not only at initialization time. For example, in React:

render: function() {
  return <input type="text" name="title" value="Untitled" />;
}

Since this method describes the view at any point in time, the value of the text input should always be Untitled.

The simplest solution I found is to add onChange={function(){}} to the inputs.

Marqueritemarques

I'm adding my 2c here in case someone else has the same issue. If you do everything by the book but it still doesn't work, check if there's e.preventDefault() call in your change handler and remove it. – Lesser

Answer 2

update "the react way" of doing that is to add the defaultChecked={true} to the needed input. Other ways are listed below.

I actually faced the same situation. What I did was to find the input tag in the componentDidMount lifecycle method of the parent React component and set the checked attribute then.

If we speak about vanilla JS you can find the first radio input using querySelector. Like so:

var Form = React.createClass({
    componentDidMount: function(){
        this.getDOMNode().querySelector('[type="radio"]').checked = "checked";
    },
    render: function(){
        //your render here
    }
});

If you use jQuery, this can be done like this:

...
    $(this.getDOMNode()).find('[type="radio"]').eq(0).prop("checked", true);
...

Chancroid

Also I found a far better solution in another thread (#27751364). Simply saying defaultChecked={true} on the needed input does the needed thing "the react way" – Chancroid

On the bottom of the answer it says "Side note: avoid defaultChecked/defaultValue and use checked/value with onChange instead." Have you seen that? – Marqueritemarques

Yes, I have. Also I have seen the console.info's from the React team that says Warning: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly. – Chancroid

I hit a similar issue last week. In my situation the controlled radio component's checked prop was updated as expected on click (as shown by the React debugger in Chrome) but the checkbox I was looking at was using a custom radio created with CSS and, surprisingly, the radio had a zIndex set to -1 which causing the issue. – Debauchery

Answer 3

I used to have similar problem.

Use defaultChecked prop for (and only for) first render, and give an onChange function to handle value changes.

I found a very good example for different input types here: http://bl.ocks.org/insin/raw/082c0d88f6290a0ea4c7/

Perchance

Answer 4

Use defaultChecked like so:

<input type="radio" name="temperature" value="hot" defaultChecked={true}/> Hot
<input type="radio" name="temperature" value="warm" /> Warm

Bennir