How to make props reactive?

Hi why isnt the props reactive there, in Btn component? I hope i dont have to use a module for this now :/

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

const Btn = (props: any) => (
  props.open ? <button>test</button> : null
);

function Counter() {
  const [open, setOpen] = createSignal(false);

  return (
    <div>
    {String(open())} 
    <br/> 
    <button onClick={() => setOpen(!open())}> toggle </button>
    <br/>
    <Btn open={open()}/>
  </div>
  );
}

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

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

const Btn = (props: any) => (
  props.open ? <button>test</button> : null
);

function Counter() {
  const [open, setOpen] = createSignal(false);

  return (
    <div>
    {String(open())} 
    <br/> 
    <button onClick={() => setOpen(!open())}> toggle </button>
    <br/>
    <Btn open={open()}/>
  </div>
  );
}

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

https://playground.solidjs.com/anonymous/00f4000c-2b99-413f-b393-0a9504cc6f14

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

20 Replies

REEEEE•2mo ago

Wrap the return of Btn in a fragment

siduckOP•2mo ago

i hate the new solid changes 😭

REEEEE•2mo ago

What new changes?

siduckOP•2mo ago

it used to work before now nothing is reactive

const Btn = (props: any) => {
  return props.open ? <button>test</button> : null
}

const Btn = (props: any) => {
  return props.open ? <button>test</button> : null
}

like that?

REEEEE•2mo ago

Like this https://playground.solidjs.com/anonymous/5a9662b6-606b-418b-8f4e-ede7621a1a50

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

REEEEE•2mo ago

Afaik this is how it always worked Stuff is only reactive in JSX, effects, or memos

siduckOP•2mo ago

so this wont work right?

REEEEE•2mo ago

No Destructuring and early returns never worked

siduckOP•2mo ago

how do you destructure then splitprops seems so confusing

siduckOP•2mo ago

syntax looks so weird too

siduckOP•2mo ago

like why would one here not just use props.name here? so many mental gymnastics

REEEEE•2mo ago

It's useful for not passing the greeting and name to the h3 you could just use props.name, it's just showing you that greting and name are put into the local object

siduckOP•2mo ago

cant i destructure anymore

siduckOP•2mo ago

ig i cant use this syntax anymore