CODEWITHSUNDEEP
reactjstypescriptreact-typescript
Tigran
Tigran

Reputation: 165

Type 'FC<IProps>' is not assignable to type

Currently I'm integrating TypeScript to my React project and I have a problem.
The error is: enter image description here

The HeaderContainer component is:

import React, {useEffect, useMemo, useState} from "react";

import {useSelector} from "react-redux";

import HeaderUI from "../ui/HeaderUI";
import LogoContainer from "../../common/Logo/functional/LogoContainer";
import BalanceInformationContainer from "./BalanceInformation/functional/BalanceInformationContainer";
import RenderEmptyContainer from "../../common/RenderEmpty/functional/RenderEmptyContainer";
import AccountContainer from "./Account/functional/AccountContainer";

import {getHeaderViewUserSelector} from "../../../redux/user/userSelectors";

import styles from "./Header.module.css";

interface OptionProps {
    className?: string,
    target?: string,
    href?: string,
}

interface ILogoProps {
    className: string,
    target: string,
    href: string,
}

interface IBalanceInformationProps {
    balance_wdx: number,
    wdxPrice: number,
    usdtPrice: number,
}

interface IAccountProps {
    username: string,
}

export type HeaderOptionType = {
    id: number,
    component: React.FC<ILogoProps | IBalanceInformationProps | IAccountProps | {}>,
    props: OptionProps,
}

const HeaderContainer: React.FC = () => {
    const user = useSelector(getHeaderViewUserSelector);

    const headerOptions = useMemo<HeaderOptionType[]>(() => ([
        {
            id: 0, component: LogoContainer, props: {
                className: styles.Logo,
                target: "_blank",
                href: "http://wordlex.finance/"
            }
        },
        {id: 1, component: RenderEmptyContainer, props: {}},
        {
            id: 2, component: BalanceInformationContainer, props: {
                balance_wdx: user ? user.balance_wdx : 0,
                wdxPrice: user ? user.wdxPrice : 0,
                usdtPrice: user ? user.usdtPrice : 0
            }
        },
        {id: 4, component: AccountContainer, props: {username: user ? user.username : "Loading..."}},
    ]), [user]);

    return <HeaderUI headerOptions={headerOptions} classes={styles}/>;
}

export default HeaderContainer;

In the Logo's component IProps I've the same as in ILogoProps interface.
I think the error is in there:
component: React.FC<ILogoProps | IBalanceInformationProps | IAccountProps | {}>,

The LogoContainer is (one of four components):

import React from "react";

import LogoUI from "../ui/LogoUI";

interface IProps {
    href: string,
    className?: string,
    target?: string,
}

const LogoContainer: React.FC<IProps> = (props) => {
    return <LogoUI {...props}/>;
}

export default LogoContainer;

Please can you describe to me what is the problem?

Upvotes: 0

Views: 915

Answers (1)

technophyle
technophyle

Reputation: 9128

In your IProps, className and target props are optional, but in your ILogoProps, they are required. Please make them exactly the same.

Also, it's generally a better idea to not duplicate the code as much as possible, so a better solution would be adding an interfaces.ts file in your root-level folder, say, constants or config, and define the interface one time and reuse it in multiple places.

Upvotes: 1

Related Questions