Radio buttons need to click twice to reflect change

If you are like me and need to use event.preventDefault(), for example to prevent the input from submitting. You can use event.stopPropagation() instead.

see this issue comment explaining for more context


remove event.preventDefault(); from your handleOptionChange method


For others running into this problem, make sure you are not using the same name property for multiple groups of radio buttons.

This can happen when mapping through an array and rendering a set of radio buttons for each array item. Avoid this issue by adding the index of the current array item to the radio button name.

Note that in this case there should be no need for preventDefault in the handleOptionChange method.