SolidJS•3y 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?

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

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