PropType for element prop breaks when dealing with custom components

Problem

The element prop has a required PropType of string, which is a problem when trying to use custom components.

Specifically, the element prop is used to create the base element for the InfiniteScroll component in the following way:

React.createElement(element, props, children)

As can be seen in the createElement docs, the argument element can have several types. These include string, or any React element.

However, when element is a string, React expects that string to be an HTML tag name like div or span, and will break completely if that isn’t the case. For custom components (e.g., Grid), the argument must be of type React element.

So, HTML tags will work with:

<InfiniteScroll element="div" />

But there’s no good way to do a custom component. If I try to pass the component name as a string:

<InfiniteScroll element="Grid" />

createElement will try to find a matching HTML tag and fail completely when none exists.

On the other hand, if I pass the component as an element:

<InfiniteScroll element={Grid} />

Everything will render properly, but the console will show an error for failed prop types (since Grid is not a string).

Suggested Fix

I think this is as simple as changing the PropType for element to: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).

I’d be more than happy to submit a PR if this is a good idea.

[cspicuzza]

I’m having this same issue when using styled-components

declared element:

export const TableScroll = styled.div`
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  box-sizing: border-box;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
`

Infinite Scroll

<InfiniteScroll
   element={TableScroll}
   initialLoad={false}
   pageStart={1}
   loadMore={this.loadMore}
   hasMore={this.hasMore()}
   threshold={500}
   useWindow={true}
   loader={<AjaxLoader key={`page-${inventory.page}`} />}
    >

The data renders into the element, but throws the same Failed Prop Type warning and InfiniteScroll doesn’t work. Using a standard element like ‘div’ works fine.

[PerlBug]

Same issue here