SolidJS•2y ago

Pass ref in routeData

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

6 Replies

REEEEE•2y ago

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

GrahfOP•2y ago

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 beautiful. thanks for getting me through that

Unknown User•2y ago

Message Not Public

Antebios•2y ago

Does anyone have a code example for this?

GrahfOP•2y ago

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

export const ParaContext = createContext()

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
}

export const ParaContext = createContext()

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 Set refs like this: setNewParas((p) => [...p, el]) or setBookRefs(() => el)

Antebios•2y ago

I figured out how to do it, thanks.

Gaming

Programming

Pass ref in routeData