col16
col16
PostsComments
SSolidJS
Created by col16 on 9/3/2024 in #support
Type '() => JSX.Element' is not assignable to type 'Element'
I'm in the process of upgrading some code I wrote 2 years ago. I have many instances of the following pattern in my codebase, where I've embedded logic (of various types) directly within the JSX output. Typescript is now complaining that Type '() => JSX.Element' is not assignable to type 'Element'. The code continues to work fine, but the TS error really bugs me! What's the solution? I want to minimise the amount of code re-working necessary because it affects so many files. But I also want to maintain the reactivity. 
import type { Component } from "solid-js";
import { createSignal } from "solid-js";
import NavMenu from "../components/details/NavMenu";

const DetailPage: Component = () => {
    const [loading, setLoading] = createSignal(true);
    return (
        <div>
            <NavMenu />
            <div>
                {() => {
                    if (loading()) {
                        return <p>Loading...</p>;
                    } else {
                        return <p>Some content</p>;
                    }
                }}
            </div>
        </div>
    );
};
import type { Component } from "solid-js";
import { createSignal } from "solid-js";
import NavMenu from "../components/details/NavMenu";

const DetailPage: Component = () => {
    const [loading, setLoading] = createSignal(true);
    return (
        <div>
            <NavMenu />
            <div>
                {() => {
                    if (loading()) {
                        return <p>Loading...</p>;
                    } else {
                        return <p>Some content</p>;
                    }
                }}
            </div>
        </div>
    );
};
7 replies