What is the best way to set a new filteredImages array with useState?

Asked Jul 17 '22 at 17:06

Active Jul 17 '22 at 17:06

Viewed 33 times

What is the best way to set a new filteredImages array with useState?

I notice I’m doing return attachments.filter(attachment => { … twice, so wondered if I can do it once.

  const [filteredImages, setFilteredImages] = useState(() => {
    return attachments.filter(attachment => {
      const {name, isImage} = attachment;
      if (name) {
        const newFileFormat = name.split('.').slice(-1)[0];
        return isImage && newFileFormat !== 'tiff';
      }
    });
  });

…

  useEffect(() => {
    setFilteredImages(() => {
      return attachments.filter(attachment => {
        const {name, isImage} = attachment;
        if (name) {
          const newFileFormat = name.split('.').slice(-1)[0];
          return isImage && newFileFormat !== 'tiff';
        }
      });
    });
  }, [attachments, card.attachments]);

I passes an argument to setFilteredImages to set a new filteredImages array but it didn’t work.

asked Jul 17 '22 at 17:06

Happy1234

`useEffect` must run when the state is created right? – nTheta Jul 17 '22 at 17:12
@Mutex Yes I think so. – Happy1234 Jul 17 '22 at 17:13
2

What's wrong with extracting the logic to a function and reusing it? – Raphael Rafatpanah Jul 17 '22 at 17:13
@RaphaelRafatpanah Currently this is not looping infinitely. – Happy1234 Jul 17 '22 at 17:16
Right, I misread earlier and have edited my comment – Raphael Rafatpanah Jul 17 '22 at 17:25
1

Set `useState` to be an empty array initially. Then in your render, check if the `filteredImages` has `length > 0`. The `useEffect` is fine as is. – Jeroen Jul 18 '22 at 12:02

What is the best way to set a new filteredImages array with useState?

0 Answers0