I am trying to use React Dropzone but the callback does not get triggered or updated when the state gets updated. I even tried adding a seperate useCallback. Any help much appriciated
Code Sandbox link https://codesandbox.io/s/thirsty-mountain-ydsc7?file=/src/App.js
Parent Componeent (class)
<UploadWithDropZone handleCallback={(files) => this.handleImageCallback(files)}/>
handleImageCallback = (files) => {
console.log('files ', files);
if(!files) return;
this.setState({addedImages: files});
}
Child Component (Hooks)
const UploadWithDropZone = ({handleCallback}) => {
const [files, setFiles] = useState([]);
const onDrop = useCallback(async acceptedFiles => {
console.log('firing ');
handleCallback(acceptedFiles);
setFiles(acceptedFiles.map(file => Object.assign(file, {
preview: URL.createObjectURL(file)
})));
}, [files])
const {getRootProps, getInputProps} = useDropzone({
accept: MIME_TYPES_ACCEPT,
onDrop,
});
const removeFile = (file) => {
const newFiles = [...files];
newFiles.splice(file, 1);
setFiles(newFiles);
}
const thumbs = files.map((file, i) => (
<div style={thumb} key={file.name}>
<div style={thumbInner}>
<DeleteIcon onClick={() => removeFile(i)}/>
<object data={file.preview ? file.preview : docs} type="image/png">
<img
src={file.preview}
style={img}
/>
</object>
</div>
</div>
));
useEffect(() => () => {
// Make sure to revoke the data uris to avoid memory leaks
files.forEach(file => URL.revokeObjectURL(file.preview));
}, [files]);
return (
<section className="container">
<div {...getRootProps({className: 'dropzone'})}>
<input {...getInputProps()} />
<p>Drag 'n' drop some files here, or click to select files</p>
</div>
<aside style={thumbsContainer}>
{thumbs}
</aside>
</section>
);
}
export default UploadWithDropZone;
any help much appriciated