Ask Question

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?

ReactTypeScriptNextJS

60 views

Author´s Philip image

Philip

Last edited on

No answers available yet.