[SOLVED] Why doesn't React update my image URL event after adding in a key to trigger a re-render

Why doesn't React update my image URL event after adding in a key to trigger a re-render

So here is my code:

<img src={currentQuestion?.GIF_URL} key={`${GIF_URL}-${currentIndex}`} alt='gif' style={{margin: '0 auto'}} />

As you can see I've added in a key to tell React to trigger a re-render and this has worked with my audio files but is not working with my gif url to my appwrite storage bucket.

I've tried adding in a key to trigger a re-render and I was expecting it to update and re-render just my this component:

<audio key={audio_URL} controls autoPlay>
            <source src={audio_URL} type="audio/mp3" />
                    </audio>

Solution

So I found a workaround. I realised that the GIF url context variable was not being updated.

So in the context hook I extracted the array of urls from the backend and I added that in as another context variable.

Then I used a currentIndex variable that is I used in the context to move to the next question to access the elements in my urls array.

That way I just extracted the urls and put them in an array and then passed that through context and looped through the array to extract the relevant gif url