What type i should pass to my imageIcon props in react typescript?

by

What props type i can use instead this any in my component for imageIcon (I know that this any is working but that’s not good practice). I’m using typescript with react. I try everything else including string but that’s not working

import React, { FC } from 'react';
import Grid from '../../hoc/layout/Grid';
import styles from './InfoBox.module.scss';

import { SvgIcon } from '@material-ui/core';

interface Props {
  title: string;
  imageIcon?: any;
  userNumber: number;
  content: string;
}

const InfoBox: FC<Props> = ({
  title,
  imageIcon,
  userNumber,
  content,
}: Props) => {
  return (
    <Grid xs={12} sm={6} md={4}>
      <div className={styles.Boxheader}>
        <div className={styles.ImageHolder}>
          <SvgIcon component={imageIcon} />
        </div>
        <p className={styles.BoxheaderTitle}>{title}</p>
      </div>
      <div className={styles.Boxcontent}>
        <p className={styles.Usernumber}>{userNumber}</p>
        <p className={styles.BoxcontentText}>{content}</p>
      </div>
    </Grid>
  );
};

export default InfoBox;

So i can forward this infoBox to other component:

import React, { FC } from 'react';
import Layout from '../../hoc/layout/Dashboard';
import InfoBox from '../../components/InfoBox';
import AccountBoxOutlinedIcon from '@material-ui/icons/AccountBoxOutlined';
const Settings: FC = () => {
  return (
    <Layout>
      <InfoBox
        title="Total Users"
        userNumber={4456}
        content="+22 in last week"
        imageIcon={AccountBoxOutlinedIcon}
      />
      <InfoBox
        title="Total Users"
        userNumber={4456}
        content="+22 in last week"
      />
    </Layout>
  );
};
export default Settings;

36 thoughts on “What type i should pass to my imageIcon props in react typescript?”

  3. Pingback: hydroxychloroquine 200 mg price
  30. Pingback: hydroxychloroquine dose for heartworm prevention

Leave a Comment