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;