How can I do so that the radio buttons are selected depending on the click that is given to each button. because when I click on elguno of the two radio buttons they are not selected.
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>
Replace event.currentTarget.value by event:
const handleChange = (event) => setState({
...state,
valuesQuestions: event
});
Based on documentation , handleChange returns array of toggled value. So in useState you must initial an array of default values.
If you want to have initial state:
const [state, setState] = React.useState([1])
And if you don't want initial:
const [state, setState] = React.useState([])
So:
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>