x-for loop wrapped in x-if

[slickdaze]

Hi there. I have a x-for loop running inside a x-if. The piece of data that it all depends on might legitimately be null (activeFrame). It's a graphics app, where manipulation happens according to the 'active' frame (might be null). I'm trying to simply make sure that none of this gets rendered/activated if the activeFrame is null. This particular little loop is part of a much larger component that also has x-if="activeFrame" higher up in the DOM. When a frame gets deleted, and the active frame is set to null. I get an error that says "Cannot read properties of null (reading 'fabric')". It's like the x-for loop is deciding that it can't read the null value before the higher x-if conditions stop it from trying. The loop that generates the error looks like this:

<template x-if="activeFrame && activeFrame.fabric.backgroundImage && activeFrame.fabric.backgroundImage.variants">
 <template x-for="(variant, index) in activeFrame.fabric.backgroundImage.variants" :key="index">
     <div class="flex items-center justify-between py-1 text-sm">
         <div x-text="variant.name" ></div>
          <div x-text="variant.value"></div>                 
     </div>
 </template>
</template>

also, it's not all the time.
Pretty sure this is a basic usage error on my part, but just can't seem to get anywhere. I realise it's probably difficult to assess without the whole context, but nevertheless, anyone any quick observations at all?
Thanks

[ekwoka]

You need an element between the templates.

But also, you can simplify this by doing

<template x-for ="(variant, index) in CONDITION ? activeFrame.fabric.backgroundImage.variants : []" :key="index">

With this you don't need anything extra

in fact, based on the conditions you show there, you can do just

<template x-for ="(variant, index) in (activeFrame?.fabric?.backgroundImage?.variants ?? [])" :key="index">

This will check if they're defined and if any of them is not defined it will just use an empty array to render nothing.

[slickdaze]

ah, excellent, I've learnt a couple of things there. Thanks so much for taking the time to write!