react-file-uploader icon indicating copy to clipboard operation
react-file-uploader copied to clipboard

The prop `children` is marked as required in `FileUploader`, but its value is `undefined`

Open Atabic opened this issue 4 years ago • 1 comments

index.js:1 Warning: Failed prop type: The prop children is marked as required in FileUploader, but its value is undefined. in FileUploader (at fileUploader.js:39) in FileManager (at fileUploader.js:24) in div (at fileUploader.js:16) in VanillaExample (created by Context.Consumer) in Route (at App.js:36) in Switch (at App.js:25) in Router (created by BrowserRouter) in BrowserRouter (at App.js:24) in Provider (at App.js:23) in div (at App.js:21) in App (at src/index.js:12) in StrictMode (at src/index.js:11) in Router (created by BrowserRouter) in BrowserRouter (at src/index.js:10) console. @ index.js:1 overrideMethod @ react_devtools_backend.js:2273 printWarning @ checkPropTypes.js:20 checkPropTypes @ checkPropTypes.js:82 validatePropTypes @ react.development.js:1714 createElementWithValidation @ react.development.js:1813 uploadFile @ fileUploader.js:38 uploadFiles @ fileUploader.js:34 value @ main.js:209 finishClassComponent @ react-dom.development.js:17160 updateClassComponent @ react-dom.development.js:17110 beginWork @ react-dom.development.js:18620 beginWork$1 @ react-dom.development.js:23179 performUnitOfWork @ react-dom.development.js:22154 workLoopSync @ react-dom.development.js:22130 performSyncWorkOnRoot @ react-dom.development.js:21756 (anonymous) @ react-dom.development.js:11089 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 flushSyncCallbackQueueImpl @ react-dom.development.js:11084 flushSyncCallbackQueue @ react-dom.development.js:11072 flushPendingDiscreteUpdates @ react-dom.development.js:21847 flushDiscreteUpdates @ react-dom.development.js:21827 finishEventHandler @ react-dom.development.js:764 batchedEventUpdates @ react-dom.development.js:798 dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568 attemptToDispatchEvent @ react-dom.development.js:4267 dispatchEvent @ react-dom.development.js:4189 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 discreteUpdates$1 @ react-dom.development.js:21887 discreteUpdates @ react-dom.development.js:806 dispatchDiscreteEvent @ react-dom.development.js:4168 Show 3 more frames main.js:391 Uncaught TypeError: this.props.children is not a function at FileUploader.value (main.js:391) at finishClassComponent (react-dom.development.js:17160) at updateClassComponent (react-dom.development.js:17110) at beginWork (react-dom.development.js:18620) at HTMLUnknownElement.callCallback (react-dom.development.js:188) at Object.invokeGuardedCallbackDev (react-dom.development.js:237) at invokeGuardedCallback (react-dom.development.js:292) at beginWork$1 (react-dom.development.js:23203) at performUnitOfWork (react-dom.development.js:22154) at workLoopSync (react-dom.development.js:22130) at performSyncWorkOnRoot (react-dom.development.js:21756) at react-dom.development.js:11089 at unstable_runWithPriority (scheduler.development.js:653) at runWithPriority$1 (react-dom.development.js:11039) at flushSyncCallbackQueueImpl (react-dom.development.js:11084) at flushSyncCallbackQueue (react-dom.development.js:11072) at flushPendingDiscreteUpdates (react-dom.development.js:21847) at flushDiscreteUpdates (react-dom.development.js:21827) at finishEventHandler (react-dom.development.js:764) at batchedEventUpdates (react-dom.development.js:798) at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568) at attemptToDispatchEvent (react-dom.development.js:4267) at dispatchEvent (react-dom.development.js:4189) at unstable_runWithPriority (scheduler.development.js:653) at runWithPriority$1 (react-dom.development.js:11039) at discreteUpdates$1 (react-dom.development.js:21887) at discreteUpdates (react-dom.development.js:806) at dispatchDiscreteEvent (react-dom.development.js:4168) value @ main.js:391 finishClassComponent @ react-dom.development.js:17160 updateClassComponent @ react-dom.development.js:17110 beginWork @ react-dom.development.js:18620 callCallback @ react-dom.development.js:188 invokeGuardedCallbackDev @ react-dom.development.js:237 invokeGuardedCallback @ react-dom.development.js:292 beginWork$1 @ react-dom.development.js:23203 performUnitOfWork @ react-dom.development.js:22154 workLoopSync @ react-dom.development.js:22130 performSyncWorkOnRoot @ react-dom.development.js:21756 (anonymous) @ react-dom.development.js:11089 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 flushSyncCallbackQueueImpl @ react-dom.development.js:11084 flushSyncCallbackQueue @ react-dom.development.js:11072 flushPendingDiscreteUpdates @ react-dom.development.js:21847 flushDiscreteUpdates @ react-dom.development.js:21827 finishEventHandler @ react-dom.development.js:764 batchedEventUpdates @ react-dom.development.js:798 dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568 attemptToDispatchEvent @ react-dom.development.js:4267 dispatchEvent @ react-dom.development.js:4189 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 discreteUpdates$1 @ react-dom.development.js:21887 discreteUpdates @ react-dom.development.js:806 dispatchDiscreteEvent @ react-dom.development.js:4168 react_devtools_backend.js:2273 Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

  • Move code with side effects to componentDidMount, and set initial state in the constructor.
  • Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: FileUploader overrideMethod @ react_devtools_backend.js:2273 printWarning @ react-dom.development.js:88 warn @ react-dom.development.js:51 push../node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:11371 flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:23112 commitRootImpl @ react-dom.development.js:22396 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 commitRoot @ react-dom.development.js:22381 finishSyncRender @ react-dom.development.js:21807 performSyncWorkOnRoot @ react-dom.development.js:21793 (anonymous) @ react-dom.development.js:11089 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 flushSyncCallbackQueueImpl @ react-dom.development.js:11084 flushSyncCallbackQueue @ react-dom.development.js:11072 flushPendingDiscreteUpdates @ react-dom.development.js:21847 flushDiscreteUpdates @ react-dom.development.js:21827 finishEventHandler @ react-dom.development.js:764 batchedEventUpdates @ react-dom.development.js:798 dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568 attemptToDispatchEvent @ react-dom.development.js:4267 dispatchEvent @ react-dom.development.js:4189 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 discreteUpdates$1 @ react-dom.development.js:21887 discreteUpdates @ react-dom.development.js:806 dispatchDiscreteEvent @ react-dom.development.js:4168 react_devtools_backend.js:2273 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

  • Move data fetching code or side effects to componentDidUpdate.
  • If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
  • Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: FileUploader overrideMethod @ react_devtools_backend.js:2273 printWarning @ react-dom.development.js:88 warn @ react-dom.development.js:51 push../node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:11377 flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:23112 commitRootImpl @ react-dom.development.js:22396 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 commitRoot @ react-dom.development.js:22381 finishSyncRender @ react-dom.development.js:21807 performSyncWorkOnRoot @ react-dom.development.js:21793 (anonymous) @ react-dom.development.js:11089 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 flushSyncCallbackQueueImpl @ react-dom.development.js:11084 flushSyncCallbackQueue @ react-dom.development.js:11072 flushPendingDiscreteUpdates @ react-dom.development.js:21847 flushDiscreteUpdates @ react-dom.development.js:21827 finishEventHandler @ react-dom.development.js:764 batchedEventUpdates @ react-dom.development.js:798 dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568 attemptToDispatchEvent @ react-dom.development.js:4267 dispatchEvent @ react-dom.development.js:4189 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 discreteUpdates$1 @ react-dom.development.js:21887 discreteUpdates @ react-dom.development.js:806 dispatchDiscreteEvent @ react-dom.development.js:4168 index.js:1 The above error occurred in the <FileUploader> component: in FileUploader (at fileUploader.js:39) in FileManager (at fileUploader.js:24) in div (at fileUploader.js:16) in VanillaExample (created by Context.Consumer) in Route (at App.js:36) in Switch (at App.js:25) in Router (created by BrowserRouter) in BrowserRouter (at App.js:24) in Provider (at App.js:23) in div (at App.js:21) in App (at src/index.js:12) in StrictMode (at src/index.js:11) in Router (created by BrowserRouter) in BrowserRouter (at src/index.js:10)

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://fb.me/react-error-boundaries to learn more about error boundaries. console. @ index.js:1 overrideMethod @ react_devtools_backend.js:2273 logCapturedError @ react-dom.development.js:19527 logError @ react-dom.development.js:19564 update.callback @ react-dom.development.js:20708 callCallback @ react-dom.development.js:12490 commitUpdateQueue @ react-dom.development.js:12511 commitLifeCycles @ react-dom.development.js:19883 commitLayoutEffects @ react-dom.development.js:22803 callCallback @ react-dom.development.js:188 invokeGuardedCallbackDev @ react-dom.development.js:237 invokeGuardedCallback @ react-dom.development.js:292 commitRootImpl @ react-dom.development.js:22541 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 commitRoot @ react-dom.development.js:22381 finishSyncRender @ react-dom.development.js:21807 performSyncWorkOnRoot @ react-dom.development.js:21793 (anonymous) @ react-dom.development.js:11089 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 flushSyncCallbackQueueImpl @ react-dom.development.js:11084 flushSyncCallbackQueue @ react-dom.development.js:11072 flushPendingDiscreteUpdates @ react-dom.development.js:21847 flushDiscreteUpdates @ react-dom.development.js:21827 finishEventHandler @ react-dom.development.js:764 batchedEventUpdates @ react-dom.development.js:798 dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568 attemptToDispatchEvent @ react-dom.development.js:4267 dispatchEvent @ react-dom.development.js:4189 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 discreteUpdates$1 @ react-dom.development.js:21887 discreteUpdates @ react-dom.development.js:806 dispatchDiscreteEvent @ react-dom.development.js:4168 Show 5 more frames main.js:391 Uncaught TypeError: this.props.children is not a function at FileUploader.value (main.js:391) at finishClassComponent (react-dom.development.js:17160) at updateClassComponent (react-dom.development.js:17110) at beginWork (react-dom.development.js:18620) at HTMLUnknownElement.callCallback (react-dom.development.js:188) at Object.invokeGuardedCallbackDev (react-dom.development.js:237) at invokeGuardedCallback (react-dom.development.js:292) at beginWork$1 (react-dom.development.js:23203) at performUnitOfWork (react-dom.development.js:22154) at workLoopSync (react-dom.development.js:22130) at performSyncWorkOnRoot (react-dom.development.js:21756) at react-dom.development.js:11089 at unstable_runWithPriority (scheduler.development.js:653) at runWithPriority$1 (react-dom.development.js:11039) at flushSyncCallbackQueueImpl (react-dom.development.js:11084) at flushSyncCallbackQueue (react-dom.development.js:11072) at flushPendingDiscreteUpdates (react-dom.development.js:21847) at flushDiscreteUpdates (react-dom.development.js:21827) at finishEventHandler (react-dom.development.js:764) at batchedEventUpdates (react-dom.development.js:798) at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568) at attemptToDispatchEvent (react-dom.development.js:4267) at dispatchEvent (react-dom.development.js:4189) at unstable_runWithPriority (scheduler.development.js:653) at runWithPriority$1 (react-dom.development.js:11039) at discreteUpdates$1 (react-dom.development.js:21887) at discreteUpdates (react-dom.development.js:806) at dispatchDiscreteEvent (react-dom.development.js:4168) value @ main.js:391 finishClassComponent @ react-dom.development.js:17160 updateClassComponent @ react-dom.development.js:17110 beginWork @ react-dom.development.js:18620 callCallback @ react-dom.development.js:188 invokeGuardedCallbackDev @ react-dom.development.js:237 invokeGuardedCallback @ react-dom.development.js:292 beginWork$1 @ react-dom.development.js:23203 performUnitOfWork @ react-dom.development.js:22154 workLoopSync @ react-dom.development.js:22130 performSyncWorkOnRoot @ react-dom.development.js:21756 (anonymous) @ react-dom.development.js:11089 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 flushSyncCallbackQueueImpl @ react-dom.development.js:11084 flushSyncCallbackQueue @ react-dom.development.js:11072 flushPendingDiscreteUpdates @ react-dom.development.js:21847 flushDiscreteUpdates @ react-dom.development.js:21827 finishEventHandler @ react-dom.development.js:764 batchedEventUpdates @ react-dom.development.js:798 dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568 attemptToDispatchEvent @ react-dom.development.js:4267 dispatchEvent @ react-dom.development.js:4189 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 discreteUpdates$1 @ react-dom.development.js:21887 discreteUpdates @ react-dom.development.js:806 dispatchDiscreteEvent @ react-dom.development.js:4168

Atabic avatar Jul 27 '20 17:07 Atabic

Kindly someone help me with this issue

Atabic avatar Jul 27 '20 17:07 Atabic