SolidJSS
SolidJS•6mo ago•
7 replies
mosesintech

Value isn't updating

I'm working on a browser game with Excalibur.js and Solid, and most of it is working as expected. But this one nested value, while definitely changing, isn't updating in my <For> component. I've tried using an <Index> as well, but the value doesn't update either way.

The currentHP outside of the For loop does update, but the values in the For do not. Can someone help me figure out what I may be doing wrong?

   <p class='bg-white'>
       {globalStore.initiativeOrder?.[0].currentHP}
   </p>
   <For
       each={globalStore.initiativeOrder}
       fallback={<></>}>
       {(combatUnit, index) => {
       return (
           <>
               <div
                   data-index={index}
                   class={`flex flex-row items-start justify-around gap-4 text-3xl cursor-pointer m-4 ${combatUnit.isInParty ? 'text-slate-700 hover:text-black' : 'text-red-700 hover:text-red-900'}`}
                   onclick={() => handleUnitNameClick(combatUnit)}>
                   <img
                       src={combatUnit.characterPortrait}
                       alt={combatUnit.name}
                       class='border-2'
                   />
                   <span class='w-full'>
                       {combatUnit.name}
                       {combatUnit.currentHP}
                   </span>
              </div>
          </>
       );
    }}
 </For>
Was this page helpful?