Argument of type 'Function' is not assignable to parameter of type 'ComponentType<never>'

Question

I'm trying to pass a component to a connect method from react-redux. I'm getting this error:

Argument of type 'Function' is not assignable to parameter of type 'ComponentType'. Type 'Function' is not assignable to type 'FunctionComponent'. Type 'Function' provides no match for the signature '(props: never, context?: any): ReactElement<any, any> | null'.

Here's the container

const mapStateToProps = (state: globalStateType, ownProps: OffersProps) => ({
  ...state,
  ...ownProps,
});

const mapDispatchToProps = (dispatch: Function) => ({
  handleSetSelectedOfferId: (
    selectedOfferId: selectedOfferIdType,
  ): HandleSetSelectedOfferIdInterface => dispatch(setSelectedOfferId(selectedOfferId)),
});

export const OffersContainer = connect(mapStateToProps, mapDispatchToProps)(OffersComponent);

And here's the component:

export const OffersComponent: Function = ({ dataset }: OffersProps): JSX.Element[] => dataset.map(({
  id, firstName, city, price, image, description,
}): React.ReactElement => (
  <FlexWrapper key={id.$oid}>
    <OfferContainer
      id={id}
      firstName={firstName}
      city={city}
      price={price}
      image={image}
      description={description}
    />
  </FlexWrapper>

));

Any idea what I'm missing?

EDIT:

Removing Function from

export const OffersComponent: Function = ({ dataset }: OffersProps): JSX.Element[] => dataset.map(({

So now it looks like this:

export const OffersComponent = ({ dataset }: OffersPropsInterface): JSX.Element[] => dataset.map(({

causes this error:

Argument of type '({ dataset }: OffersPropsInterface) => JSX.Element[]' is not assignable to parameter of type 'ComponentType'. Type '({ dataset }: OffersPropsInterface) => JSX.Element[]' is not assignable to type 'FunctionComponent'. Type 'Element[]' is missing the following properties from type 'ReactElement<any, any>': type, props, key TS2345

Nicholas Tower Nicholas Tower · Accepted Answer · 2020-11-18T09:33:30

export const OffersComponent: Function = ({ dataset }: OffersProps): JSX.Element[] => dataset.map(({

The immediate issue you're facing is that Function is too non-specific. It could be literally any old function, and you can't pass any old function into connect. So one option is to use the FunctionComponent type provided by react:

import React, { FunctionComponent } from 'react';

export const OffersComponent: FunctionComponent<OffersProps> = ({ dataset }) => {

If you prefer, the exact same type also exists under the name FC, as in import { FC } from 'react';

Or you can just delete : Function and do the types yourself. However, you'll run into another problem: The type definitions won't let react components return arrays, so the return type should be ReactElement. If you want to return multiple elements you can, but you'll do so in a fragment:

import React, { ReactElement } from 'react';

export const OffersComponent = ({ dataset }: OffersProps): ReactElement => {
  return (
    <React.Fragment>
      {dataset.map(({
        id, firstName, city, price, image, description,
       }) => {
         // etc
       }
     )}
    </React.Fragment>
  );
}

const mapDispatchToProps = (dispatch: Function) => ({

You can improve the type here too:

import { Dispatch } from 'redux';

const mapDispatchToProps = (dispatch: Dispatch) => ({

Argument of type 'Function' is not assignable to parameter of type 'ComponentType<never>'

1 Answers