TypeScript error props not assignable to never

Question

Hey kind Internet Strangers!

I'm new to coding and TypeScript and I am here to ask for some help.

I am trying to retrieve an array of objects from props to which I'll map into a new object with only the information that I need and return it but I am getting errors :(

Any help is greatly appreciated. Thanks in advance!

My code:

import { connect } from "react-redux";

const Events = (props: any) => {
  const { organization } = props;
  let result = [
    organization.bookings.bookings.map((booking: any) => ({
      title: booking.title,
      start: booking.time.startTime,
      end: booking.time.endTime,
    })),
  ];
  return result;
};

const mapStateToProps = (state: any) => ({
  organization: {
    bookings: state.bookings,
  },
});

export default connect(mapStateToProps)(Events);

I get an error at "Events" at the last line (export statement) with the following message:

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

For when I get there, can I set this component like useState(<Events />)?

What is events here? Provide more code. It seems you are passing something wrong to the component. — deepak

Axnyff Axnyff · Accepted Answer · 2020-09-28T18:25:08

connect is supposed to be used on a React Component. Here Events is a function which is returning an array of any so it's not a React Component.

TypeScript error props not assignable to never

2 Answers