I have this existing component in my React app, rendered on a certain Page
:
{data.program && (
<RelatedHeader
icon={data.program.icon}
url={data.program.url}
title={data.program.title}
/>
)}
Now this Page
can have a brand/theme
value: e.g. blue
provided from backend.
When for this page theme === blue is set, I need to pass other data in the props:
<RelatedHeader
icon={MyMapping['Blue'].Icon}
title={MyMapping['Blue'].Title}
/>
I know I can add a ternary like icon={theme === blue ? MyMapping['Blue'].Icon : data.program.icon}
, but then I have to repeat that for all the props.
Is there a smarter, cleaner way of achieving this?