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

Question

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

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>
        );
    }
}

Answer 1

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

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