Radio button style changes when clicked with React Hooks - reactjs

Question

I want the radio button to change when clicked. This is what i have now image
I want it to change to this when clicked
Here's my code: `
const [active, setIsActive] = useState(false)
<div className={`checkbox payment-radio-btn1 ${active ? "checkbox:hover" : "" }`}>
<input type="radio" value="paystack" name='payment' onChange={handleChange}/>
<label id='paystack'>Paystack (Debit/Credit Card)</label>
</div>
<div className={`checkbox payment-radio-btn2 ${active ? "checkbox:hover" : "" }`}>
<input type="radio" value="wallet" name='payment' onChange={handleChange}/>
<label id='wallet'>Pay with Wallet</label>
</div>
Here's my css code
.checkbox:hover{
border: 2px solid #00B6F0;
background: #FFFFFF;
}
.payment-radio-btn1{
position: absolute;
width: 406px;
height: 64px;
left: 10px;
top: 128px;
background: #F3F4F5;
box-shadow: 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
border-radius: 4px;
margin-top: 20px;
margin-left: 6px;
display: flex;
}

Answer 1

One option is a custom Radio element that allows you to represent your radio buttons however you like. In this example we use two emoji, but you could use images, or SVG if you wanted.
function Radio({ checked, onClick, children, on = "✔️", off = "🟡" }) {
return <div className="radio" onClick={onClick}>
{checked ? on : off } {children}
</div>
}
We can use the Radio elements in our app like this.
function App() {
const [radio, selectRadio] =
useRadio(["paystack", "paypal", "wallet"], "paystack")
return <div>
<Radio checked={radio == "paystack"} onClick={selectRadio("paystack")}>
Paystack (Debit/Credit Card)
</Radio>
{/* more radio options ...*/}
</div>
}
This is made possible by writing useRadio which encodes the radio group logic nicely in a custom hook.
function useRadio(validStates, initState) {
const [state, setState] = React.useState(initState)
return [
state,
value => event =>
validStates.includes(value)
? setState(value)
: console.error(`invalid option: ${value}`)
]
}
Here's a minimal, verifiable example. Run it below and click some radio buttons to see the application state change.
function App() {
const [radio, selectRadio] = useRadio(["paystack", "paypal", "wallet"], "paystack")
return <div>
<Radio checked={radio == "paystack"} onClick={selectRadio("paystack")}>
Paystack (Debit/Credit Card)
</Radio>
<Radio checked={radio == "wallet"} onClick={selectRadio("wallet")}>
Pay with Wallet
</Radio>
<Radio checked={radio == "paypal"} onClick={selectRadio("paypal")}>
PayPal
</Radio>
<pre>{JSON.stringify({paymentOption: radio}, null, 2)}</pre>
</div>
}
function Radio({ checked, onClick, children, on = "✔️", off = "🟡" }) {
return <div className="radio" onClick={onClick}>
{checked ? on : off } {children}
</div>
}
function useRadio(validStates, initState) {
const [state, setState] = React.useState(initState)
return [
state,
value => event =>
validStates.includes(value)
? setState(value)
: console.error(`invalid option: ${value}`)
]
}
ReactDOM.render(<App/>, document.querySelector("#app"))
.radio { cursor: pointer; }
pre { padding: 0.5rem; background-color: #ffc; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>