I made a deck of cards, where one card is "currently selected." The images of the remaining cards get blurred. I achieve this using a "disabled" prop passed to my project card component and the following conditional styles which get passed to my GatsbyImage:
let blurAmount = disabled ? '3px' : '0px';
const imgStyle = {
imagePosition: "center",
borderRadius: "2%",
filter: `blur(${blurAmount})`
}
const staticImage = (
<GatsbyImage
image={data.preview[0].gatsbyImageData}
alt={data.preview[0].description}
imgStyle={imgStyle}/>
)
The "current card" state is controlled in the parent component which loops through the queried data and creates the card deck. On the first render, this works as expected, but the when I change the current index with my toggle component, the blurred images remain blurred, and the clear image remains clear. I logged the value of blurAmount above, and it changes appropriately. This leads me to believe that once a GatsbyImage component is created from some gatsbyImageData, it's "immutable." Is this understanding correct, and is there a work around (other than storing blurred images in my CMS).
Here is a picture of the error. The current card is the second one, but it is still blurred, and the first card's image is still clear. https://imgur.com/a/24dXtr7
I will suggest you to redo the component and pass blurAmount as a prop and use a useState to store the value, and then with the useEffect hook re-render every time that value changes
useEffect(() => {
// save in state
}, [blurAmount]);