Hi,
In imagegrid component, how do I get the index of the image that has been clicked? Also I would like to be able change a clicked image with an alternate image.
Thanks,
1 Like
Hi @ofedrigo!
It looks like, to do this, you'll want to use the "Mapped" setting for the data source of your image component. You can pass an array of objects here and each object will be accessible in the click event handler using the item variable. For example, I've set up a component using the following data source:
Now, when running an event handler I can reference {{ item.index }}:
If you'd like to change the value of a clicked image, you can set the data source to be a temp state instead. This will let you use the setIn function to change the image you're seeing:
I've attached the example app - let me know if it works!
image_grid_change_image.json
1 Like
thanks that's great! how can I deselect the previously selected image when I select a new one?
Are you going for something like this?
You could store the selected index in its own temp state, then create a transformer that modifies the array you're passing to the image grid based on the selected index:
1 Like