SolidJS•2y ago

Info from Children to Parent

Hi guys sorry for my noobish question, i came from svelte where to pass something from the children to the parent (in this case a function), in the children i do

export let handler = ()=>{}

export let handler = ()=>{}

assign that to an click event

<div on:click={handler}></div>

<div on:click={handler}></div>

and in the parent i can just call the handler and thats it. How i can do the same on solid?, i try to do the same approach with an onClick={handler} or onClick={[handler]} on the children and try to print a simple log on the parent without luck.

3 Replies

jericofx•2y ago

thanks for the answer, can you show me an example?

Unknown User•2y ago

Message Not Public

Raqueebuddin Aziz•2y ago

in solid js customevents are just props, so create a prop named onClick in the child component then pass the handler to that prop and call the prop in the child

import { render } from "solid-js/web";
import { createSignal } from "solid-js";

function Child(props) {
  return <button onClick={props.onClick}>Click Me</button>;
}

function Parent() {
  const [count, setCount] = createSignal(1);
  const increment = () => setCount(count() + 1);

  return (
    <>
      {count()}
      <Child onClick={increment} />
    </>
  );
}

render(() => <Parent />, document.getElementById("app")!);

import { render } from "solid-js/web";
import { createSignal } from "solid-js";

function Child(props) {
  return <button onClick={props.onClick}>Click Me</button>;
}

function Parent() {
  const [count, setCount] = createSignal(1);
  const increment = () => setCount(count() + 1);

  return (
    <>
      {count()}
      <Child onClick={increment} />
    </>
  );
}

render(() => <Parent />, document.getElementById("app")!);

Gaming

Programming

Info from Children to Parent