How can i make an icon dynamic with react typescript?

Question

sorry but I just started using react and typescript, I need the icon to change according to the status in the AppointmentType the body color works but the icons don't, can someone show me how to solve the problem?

const MapIcon: { [key in AppointmentType]?: React.FC<IIcon> } = {
          Videocall: Camera,
          Expired: Blocked,
          Confirmed: CheckInCircle,
          New: Hourglass,
          Past: CheckInCircle,
        };

        interface IconProps {
          iconType?: React.FC<IIcon>;
          color: string;
        }
        const IconCustom = (props: IconProps) => {
          const { iconType } = props;
          return <div>{iconType}</div>;
        };

        export const AppointmentCard: React.FC<IAppointmentCard> = ({
          name,
          hourLabel,
          type,
          isBonus,
          isModify,
          wasMade,
        }) => {
          const { t } = useTranslation();
          return (
            <Wrapper type={type}>
              <WrapperConfirmsAppointment>
                <IconCustom
                  iconType={MapIcon[type]}
                  color={dateLabelColors[type] || Theme.colors.candy[500]}
                />
                <Body
                  variant={TypographyVariant.SemiBold}
                  size={BodySize.Body60}
                  margin="0 0 0 6px"
                  color={dateLabelColors[type] || Theme.colors.candy[500]}
                >
                  {t('appointment.appointmentProposal.confirmed')}
                </Body>
              </WrapperConfirmsAppointment>
            </Wrapper>
          );
        };

Answer 1

I believe the problem here is that the IconCustom component just renders the value of the MapIcon object instead of an actual icon. In order to solve it you need to render the icon itself.

There a couple of ways to tackle that:

You can alter the MapIcon structure to return the rendered icon (assuming that the values are the icons):

const MapIcon: { [key in AppointmentType]?: React.FC } = {
  Videocall: <Camera />, 
  Expired: <Blocked />
  ....
};

Render the returned value as icons:

const IconCustom = (props: IconProps) => {
  const { iconType: IconType } = props;
  return <div><IconType /></div>;
};

How can i make an icon dynamic with react typescript?

Question

1 answers

solution1
0 2022-07-28 10:49:55

How can i make an icon dynamic with react typescript?

Question

1 answers

solution1 0 2022-07-28 10:49:55

solution1
0 2022-07-28 10:49:55