I have a radio button using pure css, but it doesn't work on first click, it only work on the second click onward, not sure it has to do with my react prop or not:

const Radio = ({ id, name, value, checked, children }) => (
  <div className="radioBtn">
    <input type="radio" value={value} id={id} name={name} checked={checked} />
    <label className={"radio"} htmlFor={id}>
      <span className={"big"}>
        <span className={"small"} />
      </span>
      <span>{children}</span>
    </label>
  </div>
);

I have a radio button using pure css, but it doesn't work on first click, it only work on the second click onward, not sure it has to do with my react prop or not:

const Radio = ({ id, name, value, checked, children }) => (
  <div className="radioBtn">
    <input type="radio" value={value} id={id} name={name} checked={checked} />
    <label className={"radio"} htmlFor={id}>
      <span className={"big"}>
        <span className={"small"} />
      </span>
      <span>{children}</span>
    </label>
  </div>
);

https://codesandbox.io/s/react-sass-34b8w

• javascript
• css
• reactjs
• sass

• Did you read the error: Warning: Failed prop type: 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'? – JMadelaine Commented Mar 13, 2020 at 5:54

1 Answer 1

Use defaultChecked instead of checked={checked}.