0

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?

meez
  • 3,783
  • 5
  • 37
  • 91

0 Answers0