I have a a toggle button to which I want to add my own styling, I want the button to change color when it has been selected, but the problem with current code is that when the button is being pressed the color changes to desired result but as soon as I release my click, the button color goes back to its default styling. Can someone please help me with this
My React Component
import React, { useState } from 'react';
import ToggleButton from 'react-bootstrap/ToggleButton';
import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';
import '../styles/components/_LoanType.scss';
const LoanType:React.VFC = () => {
const [selectedButton, setSelectedButtonValue] = useState<string>('fixedRateLoan');
const handleChange = (value:string) => {
selectedButton(value);
}
return (
<div className="loan-type">
<ToggleButtonGroup type="radio" name="radio" value={selectedButton} onChange={handleChange} >
<ToggleButton value={'frl'}>1</ToggleButton>
<ToggleButton value={'vrl'}>2</ToggleButton>
<ToggleButton value={'spl'}>3</ToggleButton>
</ToggleButtonGroup>
</div>
);
}
export default LoanType;
My scss file:
.pkg .calc {
.ci .lts{
.loan-type {
.btn-group{
display: flex;
.btn-primary{
text-align: center;
background-color: #ffffff;
color: #656565;
font-weight: 900;
&:active{
color: #ffffff;
background-color: #656565;
}
}
}
}
}
}
First of all, there are some errors in your component.
In the change handler, you're calling the current state as a function, instead of the function that updates the state.
const handleChange = (value:string) => {
selectedButton(value);
}
Should be
const handleChange = (value:string) => {
setSelectedButtonValue(value);
}
Secondly, the documentation for <ToggleButton> states that an id is required for button clicks to toggle input. So you should add this to the buttons, e.g.
<ToggleButton id="frl" value={"frl"}>
1
</ToggleButton>
<ToggleButton id="vrl" value={"vrl"}>
2
</ToggleButton>
<ToggleButton id="spl" value={"spl"}>
3
</ToggleButton>
You're also initializing the state with a value that is not an option. Perhaps this should be set to either frl, vrl or spl?
useState<string>('frl');
Hope this helps!