Como puedo hacer para que se seleccionen los botones de radio dependiendo del click que se le dé a cada botón. porque cuando hago clic en elguno de los dos botones de radio no se seleccionan.
const [state, setState] = React.useState({ valuesQuestions: 1, }) const handleChange = (event) => setState({ ...state, valuesQuestions: event.currentTarget.value }); <Form> <Form.Group className="mb-3"> <Form.Label>¿Dolor de garganta?</Form.Label> <div className="btn-check selects--radio"> </div> </Form.Group> <ToggleButtonGroup type="radio" name="options" value={state.valuesQuestions} default={1} onChange={handleChange}> <ToggleButton value={1} variant="outline-warning" >Si</ToggleButton> <ToggleButton value={2} variant="outline-warning" >No</ToggleButton> </ToggleButtonGroup> </Form>Reemplace event.currentTarget.value por event :
const handleChange = (event) => setState({ ...state, valuesQuestions: event });Según la documentación , handleChange devuelve una matriz de valor alternado. Entonces, en useState , debe inicializar una matriz de valores predeterminados.
Si quieres tener un estado inicial:
const [state, setState] = React.useState([1])Y si no quieres inicial:
const [state, setState] = React.useState([])Asi que:
const [state, setState] = React.useState([1]); const handleChange = (val) => setState(val); <Form> <Form.Group className="mb-3"> <Form.Label>¿Dolor de garganta?</Form.Label> <div className="btn-check selects--radio"> </div> </Form.Group> <ToggleButtonGroup type="radio" name="options" defaultValue={state.valuesQuestions} onChange={handleChange}> <ToggleButton value={1} variant="outline-warning" >Si</ToggleButton> <ToggleButton value={2} variant="outline-warning" >No</ToggleButton> </ToggleButtonGroup> </Form>