react-images-uploading
react-images-uploading copied to clipboard
Usage as per Javascript example causes error
I have a React component (using the MUIv5 styling framework) that works prior to my attempt to incorporate ReactImageUploading.
I have wrapped the (functional) component in ReactImageUploading
as per the example code. When the code attempts to render this change, the result is Uncaught TypeError TypeError: children is not a function
error.
The failing code is in the index.js
component of react-images-uploading
.
Here is the way I attempt to use the component:
return (
<DialogContent>
<Stack
spacing={2}
>
<ImageUploading
value={images}
onChange={onImageListChange}
maxNumber={MAXIMUM_IMAGE_COUNT}
dataURLKey="data_url"
acceptType={["jpg"]}
>
{({
imageList,
onImageUpload,
onImageRemoveAll,
onImageUpdate,
onImageRemove,
isDragging,
dragProps
}) => (
<Box
sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}
>
<Avatar
alt="Avatar image"
src={avatarURL}
sx={{ width: 256, height: 256 }}
/>
</Box>
)};
</ImageUploading>
<Typography
variant="h6"
component="p"
align='center'
>
Drag photo here
</Typography>
<Typography
variant="body2"
align='center'
>
-- or --
</Typography>
<Box
sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}
>
<PersonaPictureUploadButton
personaPictureUpload={personaPictureUpload}
/>
</Box>
</Stack>
</DialogContent>
);
Here is the specific complaint:
Uncaught TypeError TypeError: children is not a function
at ReactImageUploading (/home/tms/frontend/browser/node_modules/react-images-uploading/dist/index.js:224:1)
at renderWithHooks (/home/tms/frontend/browser/node_modules/react-dom/cjs/react-dom.development.js:14985:1)
at mountIndeterminateComponent (/home/tms/frontend/browser/node_modules/react-dom/cjs/react-dom.development.js:17811:1)
at beginWork (/home/tms/frontend/browser/node_modules/react-dom/cjs/react-dom.development.js:19049:1)
at callCallback (/home/tms/frontend/browser/node_modules/react-dom/cjs/react-dom.development.js:3945:1)
at invokeGuardedCallbackDev (/home/tms/frontend/browser/node_modules/react-dom/cjs/react-dom.development.js:3994:1)
at invokeGuardedCallback (/home/tms/frontend/browser/node_modules/react-dom/cjs/react-dom.development.js:4056:1)
at beginWork$1 (/home/tms/frontend/browser/node_modules/react-dom/cjs/react-dom.development.js:23964:1)
at performUnitOfWork (/home/tms/frontend/browser/node_modules/react-dom/cjs/react-dom.development.js:22776:1)
at workLoopSync (/home/tms/frontend/browser/node_modules/react-dom/cjs/react-dom.development.js:22707:1)
I'm using React v17.0.1.