Createch_472 Posts - Answer Overflow

Createch_472

•Created by Createch_472 on 8/7/2023 in #support

ESLint error "Promise-returning function provided to attribute where a void return was expected"

I have a createResource and I'm trying to refetch it on button click:

const App: Component = () => {
    const [randomNumber, { refetch: refetchNum }] = createResource(
        async () => await wretch("http://localhost:5000/api/random-number").get().text(),
    );

    return (
        <div class="bg-sky-800 h-screen p-2 text-white">
            <p class="text-lg">Got random number: {randomNumber()}</p>
            <button
                class="px-2 bg-blue-500 rounded-md active:bg-blue-600 h-max"
                onClick={refetchNum}
            >
                Get new random number
            </button>
        </div>
    );
};

const App: Component = () => {
    const [randomNumber, { refetch: refetchNum }] = createResource(
        async () => await wretch("http://localhost:5000/api/random-number").get().text(),
    );

    return (
        <div class="bg-sky-800 h-screen p-2 text-white">
            <p class="text-lg">Got random number: {randomNumber()}</p>
            <button
                class="px-2 bg-blue-500 rounded-md active:bg-blue-600 h-max"
                onClick={refetchNum}
            >
                Get new random number
            </button>
        </div>
    );
};

However, ESLint gives me the error Promise-returning function provided to attribute where a void return was expected for the onClick handler. I found that this could be solved by doing something like onClick={() => void refetchNum()}, but is there a better way to handle this?

1 replies

Gaming

Programming