Tengo esta línea de código que me hace sentir muy mal.
{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} />}como puede ver, la diferencia de condición entre la primera y la segunda línea es el estado, y para la primera opción, no quiero tener un onClick. ¿Hay una mejor manera de manejar esto?
Aquí hay un refactor ligeramente mejor de su lógica:
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