REACT - defaultChecked don't render check attribute on second load

Question

I got my component who won't check the radio when i go to the /view/:id for the second time. I started in my list component with react-router at the index of the site, i click on the view button of an element, the radio is checked, i return in my list and go to another or the same element and it's not checked anymore. When i inspect the component in the React developer tool, the radio has the defaultChecked=true property.

import React from 'react';
import { connect } from 'react-redux';

class LicenseRadios extends React.Component {
  buildRadios() {
    let { licenses, activeValue } = this.props;

    return licenses.map(license => {
      let checked = false;

      if(activeValue !== undefined && activeValue === license.id){
        checked = true;
      }

      return (
        <div key={license.id} className="col l2">
          <p>
            <input name="license" type="radio" id={'licenseRdo_' + license.id} value={license.id} defaultChecked={checked} />
            <label htmlFor={'licenseRdo_' + license.id}>{license.label}</label>
          </p>
        </div>
      );
    });
  }

  render() {
    return (
      <div className="row">
        {this.buildRadios()}
      </div>
    );
  }
}

export default LicenseRadios;

I tried to change the defaultChecked for the checked attribute, but it require an onChange event. I don't understand this problem. Can anybody help me please?

Thank you

Panga

Answer 1

The defaultChecked prop is only used during initial render. If you need to update the value in a subsequent render, you will need to use an onChange function to handle value changes.

Check out controlled components in the docs to better understand the problem you're having.

Enthral

This doesn't answer the question of how to pre-check a radio in the event that the component is re-rendered. An onChange action would not be triggered in this situation – Amberly

I think one way to achieve this is to use a key for the component that holds the radio buttons and modify the key when the defaultChecked needs to change. If re-mounting the radio buttons is acceptable (since changing the key will force React to unmount the old ones and mount new ones), this should do it. – Resilience

Answer 2

use "undefined" for initial value for defaultChecked and re-render by setting it to true or false

const Example = () => {

  [checked,setChecked] = useState(undefined);
  
  useEffect(()=>{
  
    // fetch data
    
    setChecked(true);
  
  });
  
  return (
    <input type="checkbox" defaultChecked={checked} onClick={(e)=> changeValue(e)}/>
  );

}

Melee