SolidJSS
SolidJS•3y ago•
16 replies
Aaron

Reactivity when passing props down not reactive on nested component

Hi guys and girls, I'm currently struggling with reactivity. Here's a look at the code:

ParentComponent.tsx
                  
export default function ParentComponent(props) {
  // signal stuff
  const [level, setLevel] = createSignal(...)
  // create effect stuff

  return level()?.placements.map((placement) => {
    const [x, y] = placement.displayXY()

    return (
        <div
            style={{
              position: 'absolute',
              transform: `translate3d(${x}px, ${y}px, 0px`,
            }
            }>
          {placement.renderComponent()}
        </div>
    )
  }
}


If I add this in the parent to test, everything works correctly and properties are reactive. However, when I move this into another component ChildComponent.tsx I loose reactivity and instead get static values...

ParentComponent.tsx:
export default function ParentComponent(props) {
  // signal stuff
  const [level, setLevel] = createSignal(...)

  // create effect stuff

  return(
   <ChildComponent level={level()} />
  )
}


ChildComponent.tsx:
export default function ChildComponent(props) {
  return (
      <For each={props.level.placements}>
        {(placement) => {
          const [x, y] = placement.displayXY()

          return (
            <div
              style={{
                position: 'absolute',
                transform: `translate3d(${x}px, ${y}px, 0)`,
              }}
            >
              {placement.renderComponent()}
            </div>
          )
        }}
      </For>
  )
}


Any help would be greatly appreciated, thanks in advance!
Was this page helpful?