victoraalvarez Comments - Answer Overflow

victoraalvarez

•Created by victoraalvarez on 7/4/2023 in #support

Question on Functions vs Components

So if I wanted to switch from functions to <SourceDropdown /> would I have to pass the signals into each of the components manually? Because for example, levels depends on the source and field signals defined in a higher scope and (I think) the components scope doesnt work the same as the functions

10 replies

SSolidJS

•Created by victoraalvarez on 7/4/2023 in #support

Question on Functions vs Components

I see, this is the return of my LayerPanel function

    return (
        <>
            <ul class="list-group mt-2">
                <li class="list-group-item d-flex ">

                </li>
                <li class="list-group-item d-flex ">
                    <div class="col">
                        <div class="source-row d-flex">{
                            SourceDropdown()
                        }</div>
                        <div class="data-row d-flex">{
                            FieldDropdown()
                        }<span class="px-1" style="color: blue;">@</span>{
                            LevelDropdown()
                        }</div>
                    </div>
                    <div class="col">   

                    </div>
                </li>
            </ul>
        </>
    )

    return (
        <>
            <ul class="list-group mt-2">
                <li class="list-group-item d-flex ">

                </li>
                <li class="list-group-item d-flex ">
                    <div class="col">
                        <div class="source-row d-flex">{
                            SourceDropdown()
                        }</div>
                        <div class="data-row d-flex">{
                            FieldDropdown()
                        }<span class="px-1" style="color: blue;">@</span>{
                            LevelDropdown()
                        }</div>
                    </div>
                    <div class="col">   

                    </div>
                </li>
            </ul>
        </>
    )

So there is/isn't a difference in using {SourceDropdown()} versus <SourceDropdown />?

10 replies

SSolidJS

•Created by victoraalvarez on 7/4/2023 in #support

Question on Functions vs Components

ouff, the formatting on that is terrible, ill probably send a playground solidjs playground

10 replies

SSolidJS

•Created by victoraalvarez on 7/4/2023 in #support

Question on Functions vs Components

export default function LayerPanel () {
    const [data] = getData();

    const [selectedSource, setSelectedSource] = createSignal("");

    const SourceDropdown = () => {
        if (data.state === "ready") {
            const sources = parseModelData(data()).getSources();
            const sourcesPair = sources.map(source => {
                return {
                    [source]: SOURCE_LOOKUP[source]
                }
            });

            return (
                <>
                    <div class="dropdown">
                        <button class="btn btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            { selectedSource() ? SOURCE_LOOKUP[selectedSource()] : "Select source..." }
                        </button>
                        <ul class="dropdown-menu">
                            <For each={ sourcesPair } fallback={"Loading..."}>
                                {(source) => <li><a onClick={
                                    (event) => {
                                        const value = event.currentTarget.textContent || "";
                                        const key = Object.keys(SOURCE_LOOKUP).find(key => SOURCE_LOOKUP[key] === value);
                                        setSelectedSource(key || "default");
                                    }
                                } class="dropdown-item">{Object.values(source)}</a></li>}
                            </For>
                        </ul>
                    </div>
                </>
            )
        }
    }

export default function LayerPanel () {
    const [data] = getData();

    const [selectedSource, setSelectedSource] = createSignal("");

    const SourceDropdown = () => {
        if (data.state === "ready") {
            const sources = parseModelData(data()).getSources();
            const sourcesPair = sources.map(source => {
                return {
                    [source]: SOURCE_LOOKUP[source]
                }
            });

            return (
                <>
                    <div class="dropdown">
                        <button class="btn btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            { selectedSource() ? SOURCE_LOOKUP[selectedSource()] : "Select source..." }
                        </button>
                        <ul class="dropdown-menu">
                            <For each={ sourcesPair } fallback={"Loading..."}>
                                {(source) => <li><a onClick={
                                    (event) => {
                                        const value = event.currentTarget.textContent || "";
                                        const key = Object.keys(SOURCE_LOOKUP).find(key => SOURCE_LOOKUP[key] === value);
                                        setSelectedSource(key || "default");
                                    }
                                } class="dropdown-item">{Object.values(source)}</a></li>}
                            </For>
                        </ul>
                    </div>
                </>
            )
        }
    }

10 replies

SSolidJS

•Created by victoraalvarez on 7/3/2023 in #support

Uncaught ReferenceError: createDeepSignal is not defined

thanks so much!

5 replies

Gaming

Programming