SolidJSS
SolidJS•2y ago•
7 replies
Andre

Passing "up" signals in Solid

I am trying to understand how can you go by reading values from signals defined in children components in SolidJS.

I exemplified my situation in the code bellow (with a solution that I came up with but don’t know if is ideal):
I have one component that handles the content being edited (RecordEditor). The submission of the content written by the user is supposed to happens up in the hierarchy, in the AddRecordModal component. That means I need to “access the signals on the children component”. 

function AddRecordModal(props: Props) {
    const [title, setTitle] = createSignal<string>("");
    const [amount, setAmount] = createSignal<number>();

    createEffect(() => {
        console.log(title(), amount());
    });

    return (
        <div>
            <RecordEditor class={styles.content} title={[title, setTitle]} amount={[amount, setAmount]} />
            <button onClick={() => console.log(title(), amount())}>Submit record</button>
        </div>
    );
}

function RecordEditor(props: {
    class?: string;
    title: [Accessor<string>, Setter<string>];
    amount: [Accessor<string | number | undefined>, Setter<number | undefined>];
}) {
    const [title, setTitle] = props.title || createSignal<string>();
    const [amount, setAmount] = props.amount || createSignal<number>();

    return (
        <div class={clsx(styles.container, props.class)}>
            <input type="text" placeholder="Title" value={title()} onInput={(e) => setTitle(e.currentTarget.value)} />
            <input
                type="number"
                placeholder="Amount"
                value={amount()}
                onInput={(e) => setAmount(parseFloat(e.currentTarget.value))}
            />
        </div>
    );
}
Was this page helpful?