Binding value from child component to parent

[targetlucked69]

Hi, in svelte we can bind a child value to a parent like this:

Child component

<script>
    import { onMount } from 'svelte'

    export let username = ''

    onMount(() => {
        username = someAction()
    })
</script>

Parent component

<script>
    export let something = ''
</script>

<Child bind:username={something} />

Every time username updates, the something from parent component will also have its value.

I understand that in order to do this in solid we set the state in parent and pass it together with its' setter in the child component.

const Parent = () => {
    const [something, setSomething] = createSignal('')

    return <Child username={something} setUsername={setSomething} />
}

Just want to know if there's another way of doing this...

Another example is this for Vue

<script>
const child = ref()

onMounted(() => {
    console.log(child.value.username) 
})
</script>

<template>
    <Child ref="child" />
</template>

[untlsn-old]

In Vue child.value is getter and setter
In Solid getter and setter are separate functions like React useState
But being able to get the setter from getter, or vice versa, would be an interesting option

You can try this way. This is just my idea but I haven't encountered any bugs:

interface SignalValue<T> {
  (): T
  value: T
}

const createSignalValue = <T>(initValue: T) => {
  const [signal, setSignal] = createSignal(initValue);
  
  const self = () => signal();

  return Object.defineProperty(self, 'value', {
    get: signal,
    set: setSignal
  }) as SignalValue<T>
}

Working preview:
https://playground.solidjs.com/?version=1.3.3#NobwRAdghgtgpmAXGGUCWEwBowBcCeADgsrgM4Ae2YZA9gK4BOAxiWGjIbY7gAQi9GcCABM4jXgF9eAM0a0YvADo1aAGzQiAtACsyAegDucAEYqA3EogcuPXgGEAFmjUihEWfMUByAHT7mZ1d3bysbbj4BZiEoXDgAZTQAc2g1KU8FZVUNbT0LKys4Cls+DDjGGShWXkSUqDUANXr6OAAeABVeIrjRMl4oCHwAPn4rXl4ACgBKRF52sd4AN2a4WfmISQKIIpLeZloIMj5ouFiE5NSmtRbeAF5eDq6KHpE+geGJjDRcK5a1qbuIxAC32hz4wDIF3qWF4ZDguFqqQAunc9jE4oj6p9rD8VlNLB5lITQUdYXA1DJUdNAbCoWppgSFkJcEwPAB5Ew6ODMXC+MQyDBwAAK8mIPHwEzhFJh3mW1zg3hhwMJ4yS8NmkLqaiwC3GcNwGvhmLUC0kAKgfWNvza7SGVk2ECsMnoEB5aAODgYEHK1OV4zU8L2Xr49xOZytKwmAAZ8VtxszWZNdQ8nC43MIgy7cLcQPss9J9HbCbGNlt3GJGBNqbcRq17MHxLxCzCRLRmPR4N7fGrcABRAOd3AAIXwAEkRBMVFBCIQVFMS2BJFhwNB4EgwIE0+5qARiOvyFQcHQmKx1+E7AII-L0nJMn59KgMN5GdZveJKtVU8FhCLaIQ+n64yZt6sxXi0rQQB2JjiEWDpOi6boel+6YQBMhCimQszIe4v7-gCgEJowHiTiqDwmPQuC4B6u5wLcKjkZRBwqLwBz2BozAANY5tWIzoX+ZC+HmXZyi0ADUomSEWQFASAfH-oJwYOtJrT6AxVEQFJvAlnB2zFBEvD8lA9BqHw2HCOYi5IkAA

[thetarnav]

atom helper from solid-use might also be helpful: solid-use#atom

[lxsmnsyc]

Here's a cheap trick

<Child 
  {...{
    get username() {
      return something();
    },
    set username(value) {
      setSomething(value);
    },
  }}
/>

then in Child you'll do:

props.username = 'John Doe';

[mokeyish]

Here's a cheap trick

<Child 
  {...{
    get username() {
      return something();
    },
    set username(value) {
      setSomething(value);
    },
  }}
/>

It' seems not work in <For> component.

[funny-family]

@walmartwarlord
Something like this might work for you.
https://playground.solidjs.com/anonymous/73898c4e-5407-446a-a105-875ca478c9a5

[alexamy]

Provide a full signal tuple as a prop.

import { createSignal, Signal } from 'solid-js';

function Parent() {
  const [count, setCount] = createSignal(0);
  return <Child count={[count, setCount]} />;
}

function Child(props: { count: Signal<number> }) {
  const [count, setCount] = props.count;
  return <></>;
}