CODEWITHSUNDEEP
javascriptreactjstypescript
PositiveGuy
PositiveGuy

Reputation: 20162

Typescript error on React Component: Argument of type 'Element' is not assignable to parameter of type

I'm not sure why it's complaining here TBH, the error is baffling me.

enter image description here

createLinkSetsForCountry

function createLinkSetsForCountry(country: Country, companies: Array<Company>) {
    let companyLinks: Array<LinkItem> = [];
    const companyLinkSets = [];

    for (const company of companies) {
        companyLinks.push(<LinkItem company={company} key={company.id} />);

        companyLinkSets.push(
            <LinkSet
                className="ft-link-set"
                country={country}
                key={company.id}
                links={companyLinks} />
        );
        companyLinks = [];
    }

    return (
        <div>
            <ListHeader country={country} />
            <div>{companyLinkSets}</div>
        </div>
    );
}

LinkItem

export class LinkItem extends Component<{ company: Company, key: number }> {
    render() {
        const { company } = this.props,
            hasApp = (company.interview
                && company.interview.app
                && company.interview.app.hasAppp),
            uri = company.notInterviewed ? `companies/${company.id}/details` : `/interviews/companies/${company.id}`,
            className = `margin-top-10 margin-bottom-10 ${
                company.notInterviewed ? 'ft-company-not-interviewed' : ''
            }`;
        const link = (
            <Link className={className} id={company.id.toString()} to={uri}>
                <span id="company-name">{company.name}</span>
            </Link>
        );

        return (
            <div className="company-link vertical-align-top inline-block">
                <div>
                    <li className="margin-0">{link}</li>
                </div>
                {hasApprenticeship && (
                    <div className="align-center ft-tags margin-0" id="tags">
                        <span
                            className="ink-tooltip ink-badge category-badge font-9 inline ft-apprenticeship-tag"
                            data-tip-color="tooltip"
                            data-tip-text="offers dddd"
                            data-tip-where="up">
              A
                        </span>
                    </div>
                )}
            </div>
        );
    }
}

Upvotes: 0

Views: 117

Answers (1)

tmhao2005
tmhao2005

Reputation: 17474

Basically, your companyLinks is list of React element instead of LinkItem, so just change as following should be working:

let companyLinks: Array<React.ReactElement> = [];

Upvotes: 1

Related Questions