Forward reference a Component's state in Template

I try to wrap a Trigger and a Display component in a state managing component like so

export function Wrapper(props) {
  const [state, setState] = createSignal(false)

  return (
    <>
      {props.children}
      <div>{state()}</div>
    </>
  )
}

export function Main() {
  return (
    <Wrapper>
      <button onClick={() => Wrapper.setState(v => !v)}>Click</button>  // Pseudo-code - Wrapper.setState does not make sense of course
    </Wrapper>
  )
}

export function Wrapper(props) {
  const [state, setState] = createSignal(false)

  return (
    <>
      {props.children}
      <div>{state()}</div>
    </>
  )
}

export function Main() {
  return (
    <Wrapper>
      <button onClick={() => Wrapper.setState(v => !v)}>Click</button>  // Pseudo-code - Wrapper.setState does not make sense of course
    </Wrapper>
  )
}

Is this possible? Background is, I want the triggering component to be dynamic. Might be a button, checkbox, input field, etc. And I would like to avoid having to hardcode every event handler

Maybe there's also a more straightforward way to achieve this instead of this approach?

Cheers!

SolidJS•4y ago•

14 replies

Martnart

Forward reference a Component's state in Template

I try to wrap a Trigger and a Display component in a state managing component like so

export function Wrapper(props) {
  const [state, setState] = createSignal(false)

  return (
    <>
      {props.children}
      <div>{state()}</div>
    </>
  )
}

export function Main() {
  return (
    <Wrapper>
      <button onClick={() => Wrapper.setState(v => !v)}>Click</button>  // Pseudo-code - Wrapper.setState does not make sense of course
    </Wrapper>
  )
}

export function Wrapper(props) {
  const [state, setState] = createSignal(false)

  return (
    <>
      {props.children}
      <div>{state()}</div>
    </>
  )
}

export function Main() {
  return (
    <Wrapper>
      <button onClick={() => Wrapper.setState(v => !v)}>Click</button>  // Pseudo-code - Wrapper.setState does not make sense of course
    </Wrapper>
  )
}

Forward reference a Component's state in Template

Similar Threads

Forward reference a Component's state in Template

Similar Threads

Similar Threads

Similar Threads