SolidJS•16mo ago

Nested object signal

Hey! I have trouble getting changes in a nested object to trigger a rerender. My object looks like this:

type Alerts = {
  [key: string]: {
    name: string
    show: boolean
  }
}

type Alerts = {
  [key: string]: {
    name: string
    show: boolean
  }
}

When changing show from true to false, the dom doesn't rerender :/ I created a simplified example in the playground: https://playground.solidjs.com/anonymous/3f20d81d-25cf-45a7-9931-316bf3be7495 After changing the signal, it doesn't update the dom to reflect the change. What am I missing?

2 Replies

Nathan•16mo ago

Changing a property of an object doesn't change the object itself. So the properties themselves need to be nested signals. Or, much more easily, you can use a store.

JasminOP•16mo ago

oh I see. Another solution I just discovered is to replace the whole object with a new one instead of editing a property:

setAlertObject((prev) => {
  const next = Object.assign({}, prev)
  next['alert-1'] = {
    ...next['alert-1'],
    show: false
  }
  return next})

setAlertObject((prev) => {
  const next = Object.assign({}, prev)
  next['alert-1'] = {
    ...next['alert-1'],
    show: false
  }
  return next})

Doesn't feel 100% like the cleanest solution tho. I have to get familiar with stores :)

Gaming

Programming

Nested object signal