Estoy tratando de crear un filtro que filtre a todos los candidatos según la experiencia. Construí el filtro usando botones de radio que funciona bien, pero el problema es que no se verifica. Por defecto, quiero que no se verifique cada btn de radio cuando el usuario haga clic en un btn, entonces debería verificarse. cuando hago clic en el btn, filtra los candidatos, pero el botón de opción en sí no se verifica. Mi componente es grande, por eso acabo de proporcionar el código que todos necesitarían. Por favor, ayúdame a configurar correctamente los botones de opción. Gracias
//i'm importing this array and using it in my component export const filtersByExp = [ { value: 0, label: "Fresher", }, { value: 1, label: "1 year above ", }, { value: 2, label: "2 year above ", }, { value: 3, label: "3 year above ", }, { value: 4, label: "4 year above ", }, { value: 5, label: "5 year above ", }, ]; //component const [filter, setFilter] = useState({ stage: "all", exp: null, job_id: null, }); const handleRadioChange = ({ target }) => { let value = target.value; let name = target.name; setFilter({ ...filter, [name]: value, }); }; //jsx {[...filtersByExp].map((item) => ( <div key={item.value} className="mb-2"> <Form.Check type="radio" label={item.label} name="exp" checked={filter.exp === item.value} onChange={handleRadioChange} value={item.value} /> </div> ))}Debe usar defaultChecked en jsx. Porque si usa checked , el valor final nunca cambió, pero defaultChecked se carga solo en el renderizado inicial en react.
<div key={item.value} className="mb-2"> <Form.Check type="radio" label={item.label} name="exp" defaultChecked={filter.exp === item.value} onChange={handleRadioChange} value={item.value} /> </div>