#Pass ref in routeData

11 messages · Page 1 of 1 (latest)

stable pagoda
#

Happy Saturday. Struggling with what I hope is a simple problem.

I'm trying to get a ref passed to a grand child component. It keeps showing up as undefined. Ref works fine in the grand parents where it's set to a div.

In the grand parent:
`let ref

export function routeData() {
return ref
}

In the grand child:
` const test = useRouteData()

createEffect(() => {
console.log('test is: ', test)
})`

I know the ref eventually gets a value so not sure why it's only showing up as undefined in the grand child

flint slate
#

You probably want to use a context for this instead of routeData

#

I would also suggest using a signal for the ref rather than the variable way

stable pagoda
#

OK I kind of tried that too and didn't have much luck.... I kept getting "fn is not a function". I'll try using a signal for the ref

stable pagoda
hexed smeltBOT
#

Thread was archived by Grahf. Anyone can send a message to unarchive it.

mystic cargo
#

Does anyone have a code example for this?

stable pagoda
#

sure one sec

#

This is the context provider I made for refs:
import { createContext, createSignal, useContext } from 'solid-js'


export const ParaProvider = (props) => {
  const [paras, setParas] = createSignal([])

  return (
    <ParaContext.Provider value={[paras, setParas]}>
      {props.children}
    </ParaContext.Provider>
  )
}

export const createNewParas = () => {
  const newParas = useContext(ParaContext)[0]
  return newParas
}

export const createNewSetParas = () => {
  const setNewParas = useContext(ParaContext)[1]
  return setNewParas
}

Then you can import like this: const setNewParas = createNewSetParas()
an set the refs using that function........ if that makes sense

#

maybe it makes no sense

stable pagoda
#

Set refs like this: setNewParas((p) => [...p, el]) or setBookRefs(() => el)