Re-mount component/reset useState on every mapping

Maybe I'm thinking to complicated, but I just can not get this to work.

I'm mapping boxes which I get out of an API to my Box component:

{boxes.max((box) => (
          <div className="box" key={box.id}>
            <BoxCard
              box={box}
              image={box.image ? box.image.id : undefined}
            />
          </div>
))}

In my BoxCard, I'm fetching the image:

const [imageData, setImageData] = useState<string>();

  if (imageId) {
    useFetchItem<typeof Image>("/image/", imageId, {
      onSuccess: (data) => {
        setImageData(data);
      },
    });
  }

and this is then inserted with src={imageData}.

For the first box with an image, everything works fine, but after that, all boxes with images get assigned the image from the first box with an image.
I've already tried with a key prop, but that did not help.

Is there any way to reset the the state of useState on any mapping iteration? Or any other ways?

React TypeScript NextJS

418 views

Philip

Last edited on Mar. 30 2023 at 18:51

Best answer

You have to put the logic of the image fetch into a useEffect

useEffect(() => {
    useFetchItem<typeof Image>("/image/", imageId, {
      onSuccess: (data) => {
        setImageData(data);
      },
    });
  }, 
  [imageId]
)

BUT it would much much better if the API where you fetch the boxes delivers the image src upfront… so you don't need to fetch them individually!

AnkiCodes

Last edited on June 12 2023 at 10:43

Re-mount component/reset useState on every mapping

1 Answer available