Switching gallery image set via a category button onClick.

[pearl maple]

I have three arrays of image objects: cars, fruits, and animals.
I map through cars and dump it in a grid.
If i want the user to to choose what images they want to see, either cars, fruits, or animals. Do I need to map through each set ahead of time and use onClick to toggle css to hide/show respectively or is there a way to load and unload images on each click?

Is it possible to build it into a component and just refresh the component, not the page?

[pearl maple]

i built a component to map and render the images. I passed the image sets to the component from the page as a prop switching them via onClick and useState getter/setter and its working great.

[gritty geyser]

I'm pretty sure it's possible in both /pages and /app, but let's wait for someone to explain.

Basically in /app, it's just... Components, so you can manage the data, revalidate it, cache or not etc.

In /pages basically in every component you can just manage the data with useState right? When state changes, it re-renders the components, not the entire app. That's how React works in it's fundamentals basically. That's how it's reactive, by those hooks. When you have some other variables like pure const, no matter what you do with this data, for example pass some data from one array to another forEach(item -> ...), it won't trigger re-render.

And probably there are other ways to trigger component re-render rather than only useState. Think man

But it depends where this state is in the tree. If it's some data which is passed deeper, then if it re-renders, parent re-render - re-renders entire branch(?) with all children components

[pearl maple]

I'm not using the the /app system

I just had a brainfart and needed to talk through it

now I'm trying to figure out how to get width and height data programmatically for local images and create a an array of objects. my image grid uses a fixed size with layout=fill and crops the rest, but for lightbox, it wants the actual dimensions

[gritty geyser]

Idk, I've managed to give width and height like 5000 and then img fits to the container

I feel like Vercel fucked up literally everything with Next 13. /app is so ...... bugged that I can't stand that anymore, it works weird as hell and next/image best layout option has been deprecated lol

I'm not sure what's the best approach for responsive images with next/image right now

when you give like any height/width and make it responsive with CSS it gives you a warning in console that height/width are set but at least one of it's values has been modified in CSS

https://tenor.com/view/distort-cursed-emoji-gif-20438313