I have this line of code which I feel so bad about it.
{paymentType === "CASH" && status !== "ACCEPTED" && <OnOffButton type="cash" on={status === "CREATED"?false:true} />}
{paymentType === "CASH" && status === "ACCEPTED" && <OnOffButton onClick={()=> status === "CREATED" ? setActionBox({type: 'CREATED'}) : setActionBox({type: 'ACCEPTED'})} type="cash" on={status === "CREATED"?false:true} />}
as you can see the condition difference between first and second line is the status, and for the first option, I don't want to have a onClick . is there a better way to handle this?
Here is a slightly better refactor of your logic:
import React from 'react'
const ExampleComponent = () => {
const paymentType = 'CARD';
const status = 'ACCEPTED';
if (paymentType !== 'CASH') {
return null;
}
const isOn = status === 'CREATED';
const isAccepted = status === 'ACCEPTED';
return (
<OnOffButton
type="cash"
on={isOn}
onClick={() => isAccepted && setActionBox({ type: status })}
/>
)
}
export default ExampleComponent