use onSubmit, not onClick

Terrel Shumway — Fri, 25 Jul 2025 22:33:53 +0000

The SolidJS tutorial has several pages that work with a To Do list app. This is the form used:

<div>
    <input ref={input} />
    <button onClick={(e) => {
        if (!input.value.trim()) return;
        addTodo(input.value);
        input.value = "";
        }}
>Add Todo</button>
</div>

If you are doing your own To Do list (or any app that has a form with a single input field) you should do this instead:

<form onSubmit={(e) => {
    e.preventDefault()
    if (!input.value.trim()) return;
    addTodo(input.value);
    input.value = "";
    }}>
    <input autofocus ref={input} />
    <button>Add Todo</button>
</form>

Putting the action in the onClick handler forces the user to click the button.
Putting the action in the onSubmit handler allows the user to just press Enter.
autofocus magically returns focus to the input, nicer than an imperative input.focus().
Also consider e.target.reset() over input.value="".

Forem: Terrel Shumway

use onSubmit, not onClick