Fix TypeScript issue with returning ReactNode from FC

penspinner · Jun 30, 2019 · f43395f · f43395f
1 parent 895273c
commit f43395f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ This package was inspired by Dan Abramov's talk about React async rendering and
 
 | Property | Type      | Required? | Default | Description                                          |
 | :------- | :-------- | :-------: | :------ | :--------------------------------------------------- |
-| children | ReactNode |     ✓     |         | The React node that will be rendered (eg `<div />`). |
+| children | ReactNode |           | `null`  | The React node that will be rendered (eg `<div />`). |
 
 <br>
 

diff --git a/src/index.ts b/src/index.ts
@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useState } from 'react';
+import { FC, ReactElement, ReactNode, useEffect, useState } from 'react';
 
 import globalObject from './globalObject';
 
@@ -10,11 +10,7 @@ const cancelSchedule = globalObject.cancelIdleCallback
   ? globalObject.cancelIdleCallback
   : globalObject.clearTimeout;
 
-interface ITimeSlicerProps {
-  children: ReactNode;
-}
-
-const TimeSlicer = ({ children }: ITimeSlicerProps) => {
+const TimeSlicer: FC = ({ children }) => {
   const [previousChildren, setPreviousChildren] = useState<ReactNode>(null);
 
   useEffect(() => {
@@ -25,7 +21,8 @@ const TimeSlicer = ({ children }: ITimeSlicerProps) => {
     return () => cancelSchedule(scheduler);
   });
 
-  return previousChildren;
+  // https://stackoverflow.com/questions/54905376/type-error-jsx-element-type-null-undefined-is-not-a-constructor-functi
+  return previousChildren as (ReactElement | null);
 };
 
 export default TimeSlicer;