Search code examples
blueprintjs

BlueprintJS RadioGroup/Radio issue with defaultChecked/checked prop

I'm trying to setup a RadioGroup component that has the Radio component with the 'Data' label initially checked. But when I use the following code:

<RadioGroup
  onChange={(e) => {
    this.store.setDataFilterSelection(e.target.value)
  }}
  >
  <Radio label='Data'
    defaultChecked
    value='1'
    className='radio-selectors' />
  <Radio label='Description'
    value='2'
    className='radio-selectors' />
  <Radio label='Data Source'
    value='3'
    className='radio-selectors' />
</RadioGroup>

I get the following warning in my console.

Blueprint.Radio contains an input of type radio with both checked and defaultChecked props. Input elements must be either controlled or uncontrolled (specify either the checked prop, or the defaultChecked prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: react-controlled-components

I've tried a couple of variations and can't seem to get it right, basically I want to be able to monitor a change in the Radio buttons, but I can't tie them into state as they've done in the example here: http://blueprintjs.com/docs/#components.forms.radio

Solution

  • defaultChecked is only supported in uncontrolled usage (this is a core React concept, not a Blueprint thing), whereas checked is only supported in controlled usage--this is what the React error is telling you.

    But if you're using RadioGroup then all the Radio children are forced into controlled mode and all state should go through RadioGroup. However RadioGroup does not currently support a defaultValue prop so this is not actually possible. I'd call this a bug in Blueprint, so good find!

    Please file an issue on the repo and we'll look into implementing this (or even better, submit a PR with the fix!)