Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

clearOnUnmount doesn't work for functional components.

See original GitHub issue

Bug Report

Describe the bug

I have a drop zone in a functional component, when form is submitted successfully, i clear state values and selected images arrays, but images are still visible in dropzone previews

i also used clearOnUnmount as mentioned in this issue Clear file list when submitting not working

Expected behavior

selected files should be cleared

Versions

OS: [e.g. iOS]
Browser: [e.g. chrome, safari]
@material-ui/core version: [e.g. 4.9.9]
material-ui-dropzone version: [e.g. 2.4.9]

Issue Analytics

State:
Created 3 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

2reactions

panz3rcommented, Jun 14, 2020

Hi @mfaizan1 ,

Thanks for your feedback, which version of material-ui-dropzone are you using?

For your use-case I’d suggest you to use DropzoneAreaBase component which allows you more control over the files state.

It’s not yet publish to npm but you can install it by running

❯ npm i yuvaleros/material-ui-dropzone#v3.2.1

(the same also works with yarn add)

See docs for more details.

0reactions

ramakrishna449commented, Nov 23, 2020

hi @panz3r i need to clear my DropzoneArea after form submitting gone through clearOnUnmount props but it will not worked …please help me … i used this version of “material-ui-dropzone”: “^3.5.0”,

<DropzoneArea acceptedFiles={[‘image/jpeg’, ‘image/png’, ‘.PDF’,‘.xls’,‘.xlsx’, ‘.txt’, ‘.csv’, ‘.doc’, ‘.docx’]} maxFileSize={5000000} filesLimit ={10} onChange={e => setUpload(e)} showFileNames={true} dropzoneText={“Drag file(s) here,or browse”} clearOnUnmount={true} />

Top Results From Across the Web

React functional component won't display - Stack Overflow

and this is my react component which resides in file named include-component. js : import React from "react"; import ReactDOM from "react-dom"; ...

A Comprehensive Guide to Working With Functional ...

So how do hooks and functional components solve these problems? Read on to learn about it all. The difference between classes and functions...

Using the Effect Hook - React

The Effect Hook lets you perform side effects in function components: import React, { useState, useEffect } from 'react'; function Example() { const...

7 Reasons to Outlaw React's Functional Components - Medium

1. Conversion Hassle. Functional components don't support state, refs, or lifecycle methods. They can't extend PureComponent either. Sometimes, you'll create a ...

When does React re-render components? - Felix Gerschau

If we want to understand how React renders and re-renders work, ... This doesn't only mean the component's render function will be called, ......