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?
60 views
