Create unique array while push Object to array in react useState hook

Question

I am declaring react state as below

const [selectedFiles, setselectedFiles] = useState([]);

Using them in function as below

function handleAcceptedFiles(files) {
    files.map((file) =>
      Object.assign(file, {
        preview: URL.createObjectURL(file),
        formattedSize: file.size,
      })
    );
    selectedFiles.length === 0 ? setselectedFiles(files) : setselectedFiles(oldFiles => [...oldFiles,...files])
  }

At this point how can we add only new file and remove duplicate file

setselectedFiles(oldFiles => [...oldFiles,...files])

does files includes oldFiles's elements, or just new elements only? — hgb123
– hgb123, Commented Aug 27, 2020 at 5:13
just new elements so why you worry about removing duplicated files? — hgb123
– hgb123, Commented Aug 27, 2020 at 5:16
In new element may be he select same files then it will add duplicate files — Milind
– Milind, Commented Aug 27, 2020 at 5:17

hgb123 · Accepted Answer · 2020-08-27 05:35:39Z

1

You could create a lookup object with key-value pairs of filePreview-file and grab values from that

function handleAcceptedFiles(files) {
  const pendingFiles = files.map(file =>
    Object.assign(file, {
      preview: URL.createObjectURL(file),
      formattedSize: file.size
    })
  )

  const dedupFiles = Object.values(
    [...selectedFiles, ...pendingFiles].reduce((lookup, file) => {
      if (lookup[file.name] === undefined) {
        lookup[file.name] = file
      }
      return lookup
    }, {})
  )

  setselectedFiles(dedupFiles)
}

answered Aug 27, 2020 at 5:35

hgb123

14.9k3 gold badges24 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gineet Mehta · Accepted Answer · 2020-08-27 06:19:15Z

1

Maybe this is what you need?

function handleAcceptedFiles(files) {
  // Map over the current selection of files, generate required fields
  const newFiles = files.map(file => {
    return Object.assign(file, {
      preview: URL.createObjectURL(file),
      formattedSize: file.size,
    });
  });

  // Find non-duplicate entries in previously selected files
  const nonDupFiles = selectedFiles.filter(oldFile => {
    const index = newFiles.findIndex(newFile => newFile.preview === oldFile.preview);
    return index === -1;  // index -1 => file wasn't found => non duplicate
  });

  // Concat of new files and non-dup files is what we need in state
  setselectedFiles(newFiles.concat(nonDupFiles));
}

answered Aug 27, 2020 at 6:19

Gineet Mehta

561 silver badge3 bronze badges

Collectives™ on Stack Overflow

Create unique array while push Object to array in react useState hook

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related