Type 'null' is not assignable to type 'Element'.ts(2345)

Question

I am getting the following error:

Argument of type 'FunctionComponent> & { WrappedComponent: ComponentType<{ intl: IntlShape; } & ISortContainerProps>; }' is not assignable to parameter of type 'WrappedComponent>>'. Type 'FunctionComponent> & { WrappedComponent: ComponentType<{ intl: IntlShape; } & ISortContainerProps>; }' is not assignable to type 'WrappedComponentFactory>>'. Type 'ReactElement ReactElement Component)> | null) | (new (props: any) => Component)> | null' is not assignable to type 'Element'. Type 'null' is not assignable to type 'Element'.ts(2345)

I am trying to wrap my list with SortableContainer from react-sortable-hoc and export it. My component is:

class SortContainer extends React.Component<{ intl: IntlShape } & ISortContainerProps, {}> {

  public render() {

    ...

    return (
      <Row className={style.sortableList}>
        <List striped>
          <List.Header
            name={formatMessage(messages.detailsType)}
            width={2}
          />
          ...
          {
            items &&
            !!items.length &&
            items.map((item, index) => {
              return (
                <React.Fragment key={`detailsRowId__${index}`}>
                ...
                </React.Fragment>
              );
            })
          }
        </List>
      </Row>
    );
  }
}

export default
  SortableContainer(
    injectIntl(
      observer(SortContainer)
    )
  );

FortyTwo FortyTwo · Accepted Answer · 2019-11-12T13:52:59

Why not export your list without using HOC SortableContainer and then wrap it where it is used like in this example

export default injectIntl(observer(SortContainer)));

Then in your caller component:

const SortableList = SortableContainer<any>(({ children }) => <div>{children}</div>);

and call it like this:

<SortableList onSortEnd={this.onSortEnd}>
    <SortContainer
        ...
    />
</SortableList>

Type 'null' is not assignable to type 'Element'.ts(2345)

1 Answers