SolidJS•12mo ago

Question on Functions vs Components

Hey all! I have a quick question. What is the difference between using plain functions versus using components when both return JSX? I realized just now I accidentally had used functions instead of components in my code but when I changed them to components, it broke the functionality. Is it okay to use either or?

6 Replies

fabiospampinato•12mo ago

Can you post an example of a component that's not a function?

victoraalvarez•12mo ago

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>
                </>
            )
        }
    }

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

oneiro•12mo ago

this is a function returning a component (a component is just a function returning JSX)

victoraalvarez•12mo ago

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 />?

thetarnav•12mo ago

the only difference is that <SourceDropdown /> gets automatically untracked while the other one doesn't + some minor only-in-development differences

victoraalvarez•12mo ago

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

Gaming

Programming

Question on Functions vs Components