createRouteAction
createRouteAction
creates a controller for dispatching and managing the submission state of an async user action.
tsx
const [enrollingconst enrolling: {
pending: boolean;
input?: void | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
, enrollconst enroll: ((vars: void) => Promise<void | undefined>) & {
Form: ParentComponent<void | FormProps>;
url: string;
}
] = createRouteAction(alias) createRouteAction<void, void>(fn: (arg1: void, event: ActionEvent) => Promise<void>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<void, void> (+1 overload)
import createRouteAction
(enrollInClassfunction enrollInClass(): Promise<void>
);
tsx
const [enrollingconst enrolling: {
pending: boolean;
input?: void | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
, enrollconst enroll: ((vars: void) => Promise<void | undefined>) & {
Form: ParentComponent<void | FormProps>;
url: string;
}
] = createRouteAction(alias) createRouteAction<void, void>(fn: (arg1: void, event: ActionEvent) => Promise<void>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<void, void> (+1 overload)
import createRouteAction
(enrollInClassfunction enrollInClass(): Promise<void>
);
Usage
While you might think this should be just a straight forward onClick
handler, there are a few things to consider. You would want to show indicators of the action being performed. You would want to handle errors. You may also want to handle multiple submissions. Let's see how createRouteAction
helps you deal with some of these issues.
Run a mutation
If you are coming from tanstack-query, this hook is similar to useMutation
. It allows you to run an async function and manage the state of the action. It also allows you to run the action multiple times.
Show a pending indicator for an action in progress
We want to show a pending status while the action is being performed. The submission has a pending
property that we can use to show a pending indicator.
tsx
import { createRouteAction(alias) function createRouteAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteAction<T, U> (+1 overload)
import createRouteAction
} from 'solid-start'; import { ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
} from 'solid-js';
function EnrollmentPagefunction EnrollmentPage(): JSX.Element
() { const [enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
, enrollconst enroll: ((vars: string) => Promise<string | undefined>) & {
Form: ParentComponent<string | FormProps>;
url: string;
}
] = createRouteAction(alias) createRouteAction<string, string>(fn: (args: string, event: ActionEvent) => Promise<string>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<...> (+1 overload)
import createRouteAction
(enrollInClassfunction enrollInClass(className: string): Promise<string>
); return (
<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
onClick(property) JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined
={() => enrollconst enroll: (vars: string) => Promise<string | undefined>
('Defense against the Dark Arts')} disabled(property) JSX.ButtonHTMLAttributes<HTMLButtonElement>.disabled?: boolean | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
} >
Enroll
</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when(property) when: boolean | null | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
}> <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>Enrolling...</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
> </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> );
}
tsx
import { createRouteAction(alias) function createRouteAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteAction<T, U> (+1 overload)
import createRouteAction
} from 'solid-start'; import { ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
} from 'solid-js';
function EnrollmentPagefunction EnrollmentPage(): JSX.Element
() { const [enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
, enrollconst enroll: ((vars: string) => Promise<string | undefined>) & {
Form: ParentComponent<string | FormProps>;
url: string;
}
] = createRouteAction(alias) createRouteAction<string, string>(fn: (args: string, event: ActionEvent) => Promise<string>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<...> (+1 overload)
import createRouteAction
(enrollInClassfunction enrollInClass(className: string): Promise<string>
); return (
<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
onClick(property) JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined
={() => enrollconst enroll: (vars: string) => Promise<string | undefined>
('Defense against the Dark Arts')} disabled(property) JSX.ButtonHTMLAttributes<HTMLButtonElement>.disabled?: boolean | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
} >
Enroll
</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when(property) when: boolean | null | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
}> <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>Enrolling...</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
> </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> );
}
Handle errors
If an error occurs, the submission will have an error
property. We can use this to show an error message.
routes/enrollment.tsx
tsx
import { createRouteAction(alias) function createRouteAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteAction<T, U> (+1 overload)
import createRouteAction
} from 'solid-start'; import { ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
} from 'solid-js';
export default function EnrollmentPagefunction EnrollmentPage(): JSX.Element
() { const [enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
, enrollconst enroll: ((vars: string) => Promise<void | undefined>) & {
Form: ParentComponent<string | FormProps>;
url: string;
}
] = createRouteAction(alias) createRouteAction<string, void>(fn: (args: string, event: ActionEvent) => Promise<void>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<string, void> (+1 overload)
import createRouteAction
(enrollInClassfunction enrollInClass(className: string): Promise<void>
); return (
<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
onClick(property) JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined
={() => enrollconst enroll: (vars: string) => Promise<void | undefined>
('Defense against the Dark Arts')} disabled(property) JSX.ButtonHTMLAttributes<HTMLButtonElement>.disabled?: boolean | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
} >
Enroll
</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when(property) when: boolean | null | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
}> <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>Enrolling...</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.error}> <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>{enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.error.message}</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
onClick(property) JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined
={() => enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.retry(property) retry: () => void
()}>Retry</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
> </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> );
}
routes/enrollment.tsx
tsx
import { createRouteAction(alias) function createRouteAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteAction<T, U> (+1 overload)
import createRouteAction
} from 'solid-start'; import { ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
} from 'solid-js';
export default function EnrollmentPagefunction EnrollmentPage(): JSX.Element
() { const [enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
, enrollconst enroll: ((vars: string) => Promise<void | undefined>) & {
Form: ParentComponent<string | FormProps>;
url: string;
}
] = createRouteAction(alias) createRouteAction<string, void>(fn: (args: string, event: ActionEvent) => Promise<void>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<string, void> (+1 overload)
import createRouteAction
(enrollInClassfunction enrollInClass(className: string): Promise<void>
); return (
<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
onClick(property) JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined
={() => enrollconst enroll: (vars: string) => Promise<void | undefined>
('Defense against the Dark Arts')} disabled(property) JSX.ButtonHTMLAttributes<HTMLButtonElement>.disabled?: boolean | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
} >
Enroll
</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when(property) when: boolean | null | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
}> <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>Enrolling...</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.error}> <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>{enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.error.message}</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
onClick(property) JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined
={() => enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.retry(property) retry: () => void
()}>Retry</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
> </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> );
}
Showing a success message
If you want to show a success message after an action is complete, you can use the result
property to get the returned value of the action.
routes/enrollment.tsx
tsx
import { createRouteAction(alias) function createRouteAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteAction<T, U> (+1 overload)
import createRouteAction
, createRouteData(alias) function createRouteData<T, S = true>(fetcher: RouteDataFetcher<S, T>, options?: RouteDataOptions<undefined, S>): Resource<T | undefined> (+1 overload)
import createRouteData
} from 'solid-start'; import { ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
, Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): JSX.Element
import For
} from 'solid-js';
export function EnrollmentPagefunction EnrollmentPage(): JSX.Element
() { const [enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
, enrollconst enroll: ((vars: string) => Promise<string | undefined>) & {
Form: ParentComponent<string | FormProps>;
url: string;
}
] = createRouteAction(alias) createRouteAction<string, string>(fn: (args: string, event: ActionEvent) => Promise<string>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<...> (+1 overload)
import createRouteAction
(enrollInClassfunction enrollInClass(className: string): Promise<string>
); return (
<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
onClick(property) JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined
={() => enrollconst enroll: (vars: string) => Promise<string | undefined>
('Defense against the Dark Arts')} disabled(property) JSX.ButtonHTMLAttributes<HTMLButtonElement>.disabled?: boolean | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
} >
Enroll
</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when(property) when: boolean | null | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
}> <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>Enrolling...</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when(property) when: string | false | null | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.result(property) result?: string | undefined
}> <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>Successfully enrolled in {enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.result(property) result?: string | undefined
}</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
> </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> );
}
routes/enrollment.tsx
tsx
import { createRouteAction(alias) function createRouteAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteAction<T, U> (+1 overload)
import createRouteAction
, createRouteData(alias) function createRouteData<T, S = true>(fetcher: RouteDataFetcher<S, T>, options?: RouteDataOptions<undefined, S>): Resource<T | undefined> (+1 overload)
import createRouteData
} from 'solid-start'; import { ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
, Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): JSX.Element
import For
} from 'solid-js';
export function EnrollmentPagefunction EnrollmentPage(): JSX.Element
() { const [enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
, enrollconst enroll: ((vars: string) => Promise<string | undefined>) & {
Form: ParentComponent<string | FormProps>;
url: string;
}
] = createRouteAction(alias) createRouteAction<string, string>(fn: (args: string, event: ActionEvent) => Promise<string>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<...> (+1 overload)
import createRouteAction
(enrollInClassfunction enrollInClass(className: string): Promise<string>
); return (
<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
onClick(property) JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined
={() => enrollconst enroll: (vars: string) => Promise<string | undefined>
('Defense against the Dark Arts')} disabled(property) JSX.ButtonHTMLAttributes<HTMLButtonElement>.disabled?: boolean | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
} >
Enroll
</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when(property) when: boolean | null | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
}> <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>Enrolling...</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when(property) when: string | false | null | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.result(property) result?: string | undefined
}> <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>Successfully enrolled in {enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.result(property) result?: string | undefined
}</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
> </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> );
}
Refetching data after an action
You don't have to do anything more to have your createRouteData
functions refetch data after an action. The createRouteData
functions will automatically refetch data after an action is performed.
Invalidating specific data after an action
If you don't want to refetch all the data, you can use the invalidate
param to specify which key
's to invalidate. This way you only refetch what you know has changed.
routes/enrollment.tsx
tsx
import { createRouteAction(alias) function createRouteAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteAction<T, U> (+1 overload)
import createRouteAction
, createRouteData(alias) function createRouteData<T, S = true>(fetcher: RouteDataFetcher<S, T>, options?: RouteDataOptions<undefined, S>): Resource<T | undefined> (+1 overload)
import createRouteData
} from 'solid-start'; import { ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
, Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): JSX.Element
import For
} from 'solid-js';
export default function EnrollmentPagefunction EnrollmentPage(): JSX.Element
() { const classesconst classes: Resource<{
name: string;
}[] | undefined>
= createRouteData(alias) createRouteData<{
name: string;
}[], string>(fetcher: RouteDataFetcher<string, {
name: string;
}[]>, options?: RouteDataOptions<undefined, string> | undefined): Resource<...> (+1 overload)
import createRouteData
(getClassesfunction getClasses(): Promise<{
name: string;
}[]>
, { key(property) key?: RouteDataSource<string>
: 'classes' }); const [enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
, enrollconst enroll: ((vars: string) => Promise<string | undefined>) & {
Form: ParentComponent<string | FormProps>;
url: string;
}
] = createRouteAction(alias) createRouteAction<string, string>(fn: (args: string, event: ActionEvent) => Promise<string>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<...> (+1 overload)
import createRouteAction
( enrollInClassfunction enrollInClass(className: string): Promise<string>
, { invalidate(property) invalidate?: Invalidate | undefined
: ['classes'] } );
return (
<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <ul(property) JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>
> <Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): JSX.Element
import For
each(property) each: false | {
name: string;
}[] | null | undefined
={classesconst classes: () => {
name: string;
}[] | undefined
()}> {course(parameter) course: {
name: string;
}
=> <li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
>{course(parameter) course: {
name: string;
}
.name}</li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
>} </Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): JSX.Element
import For
> </ul(property) JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>
> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
onClick(property) JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined
={() => enrollconst enroll: (vars: string) => Promise<string | undefined>
('Defense against the Dark Arts')} disabled(property) JSX.ButtonHTMLAttributes<HTMLButtonElement>.disabled?: boolean | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
} >
Enroll
</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when(property) when: boolean | null | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
}> <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>Enrolling...</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.error}> <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>{enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.error.message}</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
> </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> );
}
routes/enrollment.tsx
tsx
import { createRouteAction(alias) function createRouteAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteAction<T, U> (+1 overload)
import createRouteAction
, createRouteData(alias) function createRouteData<T, S = true>(fetcher: RouteDataFetcher<S, T>, options?: RouteDataOptions<undefined, S>): Resource<T | undefined> (+1 overload)
import createRouteData
} from 'solid-start'; import { ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
, Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): JSX.Element
import For
} from 'solid-js';
export default function EnrollmentPagefunction EnrollmentPage(): JSX.Element
() { const classesconst classes: Resource<{
name: string;
}[] | undefined>
= createRouteData(alias) createRouteData<{
name: string;
}[], string>(fetcher: RouteDataFetcher<string, {
name: string;
}[]>, options?: RouteDataOptions<undefined, string> | undefined): Resource<...> (+1 overload)
import createRouteData
(getClassesfunction getClasses(): Promise<{
name: string;
}[]>
, { key(property) key?: RouteDataSource<string>
: 'classes' }); const [enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
, enrollconst enroll: ((vars: string) => Promise<string | undefined>) & {
Form: ParentComponent<string | FormProps>;
url: string;
}
] = createRouteAction(alias) createRouteAction<string, string>(fn: (args: string, event: ActionEvent) => Promise<string>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<...> (+1 overload)
import createRouteAction
( enrollInClassfunction enrollInClass(className: string): Promise<string>
, { invalidate(property) invalidate?: Invalidate | undefined
: ['classes'] } );
return (
<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <ul(property) JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>
> <Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): JSX.Element
import For
each(property) each: false | {
name: string;
}[] | null | undefined
={classesconst classes: () => {
name: string;
}[] | undefined
()}> {course(parameter) course: {
name: string;
}
=> <li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
>{course(parameter) course: {
name: string;
}
.name}</li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
>} </Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): JSX.Element
import For
> </ul(property) JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>
> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
onClick(property) JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined
={() => enrollconst enroll: (vars: string) => Promise<string | undefined>
('Defense against the Dark Arts')} disabled(property) JSX.ButtonHTMLAttributes<HTMLButtonElement>.disabled?: boolean | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
} >
Enroll
</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when(property) when: boolean | null | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
}> <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>Enrolling...</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.error}> <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>{enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.error.message}</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
> </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> );
}
Optimistic UI
Now, since we have Javascript in our hands, we can give the user a more enhanced experience. Sometimes this means pretending an action was successful to provide a more responsive user experience. This is called an optimistic UI. We can do this in a neat way where you don't need to manage extra state. You have access to the input
on the submission, so you know what data was sent to the action.
Using the pending
property, you can use the input
as part of the visible UI. For example, in a list of enrolled classes, you can add the class to the list before the action is complete. Then, if the action fails, you can remove the class from the list.
routes/enrollment.tsx
tsx
import { createRouteAction(alias) function createRouteAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteAction<T, U> (+1 overload)
import createRouteAction
, createRouteData(alias) function createRouteData<T, S = true>(fetcher: RouteDataFetcher<S, T>, options?: RouteDataOptions<undefined, S>): Resource<T | undefined> (+1 overload)
import createRouteData
} from 'solid-start'; import { ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
, Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): JSX.Element
import For
} from 'solid-js';
export function EnrollmentPagefunction EnrollmentPage(): JSX.Element
() { const classesconst classes: Resource<{
name: string;
}[] | undefined>
= createRouteData(alias) createRouteData<{
name: string;
}[], string>(fetcher: RouteDataFetcher<string, {
name: string;
}[]>, options?: RouteDataOptions<undefined, string> | undefined): Resource<...> (+1 overload)
import createRouteData
(getClassesfunction getClasses(): Promise<{
name: string;
}[]>
, { key(property) key?: RouteDataSource<string>
: 'classes' }); const [enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
, enrollconst enroll: ((vars: string) => Promise<string | undefined>) & {
Form: ParentComponent<string | FormProps>;
url: string;
}
] = createRouteAction(alias) createRouteAction<string, string>(fn: (args: string, event: ActionEvent) => Promise<string>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<...> (+1 overload)
import createRouteAction
( enrollInClassfunction enrollInClass(className: string): Promise<string>
, { invalidate(property) invalidate?: Invalidate | undefined
: ['classes'] } );
return (
<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> Enrolled Classes
<ul(property) JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>
> <Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): JSX.Element
import For
each(property) each: false | {
name: string;
}[] | null | undefined
={classesconst classes: () => {
name: string;
}[] | undefined
()}> {course(parameter) course: {
name: string;
}
=> <li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
>{course(parameter) course: {
name: string;
}
.name}</li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
>} </Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): JSX.Element
import For
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when(property) when: boolean | null | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
}> <li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
>{enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.input(property) input?: string | undefined
}</li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
> </ul(property) JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>
> </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
onClick(property) JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined
={() => enrollconst enroll: (vars: string) => Promise<string | undefined>
('Defense against the Dark Arts')} disabled(property) JSX.ButtonHTMLAttributes<HTMLButtonElement>.disabled?: boolean | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
} >
Enroll
</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when(property) when: boolean | null | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
}> <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>Enrolling...</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.error}> <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>{enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.error.message}</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
> </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> );
}
routes/enrollment.tsx
tsx
import { createRouteAction(alias) function createRouteAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteAction<T, U> (+1 overload)
import createRouteAction
, createRouteData(alias) function createRouteData<T, S = true>(fetcher: RouteDataFetcher<S, T>, options?: RouteDataOptions<undefined, S>): Resource<T | undefined> (+1 overload)
import createRouteData
} from 'solid-start'; import { ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
, Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): JSX.Element
import For
} from 'solid-js';
export function EnrollmentPagefunction EnrollmentPage(): JSX.Element
() { const classesconst classes: Resource<{
name: string;
}[] | undefined>
= createRouteData(alias) createRouteData<{
name: string;
}[], string>(fetcher: RouteDataFetcher<string, {
name: string;
}[]>, options?: RouteDataOptions<undefined, string> | undefined): Resource<...> (+1 overload)
import createRouteData
(getClassesfunction getClasses(): Promise<{
name: string;
}[]>
, { key(property) key?: RouteDataSource<string>
: 'classes' }); const [enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
, enrollconst enroll: ((vars: string) => Promise<string | undefined>) & {
Form: ParentComponent<string | FormProps>;
url: string;
}
] = createRouteAction(alias) createRouteAction<string, string>(fn: (args: string, event: ActionEvent) => Promise<string>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<...> (+1 overload)
import createRouteAction
( enrollInClassfunction enrollInClass(className: string): Promise<string>
, { invalidate(property) invalidate?: Invalidate | undefined
: ['classes'] } );
return (
<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> Enrolled Classes
<ul(property) JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>
> <Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): JSX.Element
import For
each(property) each: false | {
name: string;
}[] | null | undefined
={classesconst classes: () => {
name: string;
}[] | undefined
()}> {course(parameter) course: {
name: string;
}
=> <li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
>{course(parameter) course: {
name: string;
}
.name}</li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
>} </Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): JSX.Element
import For
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when(property) when: boolean | null | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
}> <li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
>{enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.input(property) input?: string | undefined
}</li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
> </ul(property) JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>
> </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
onClick(property) JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined
={() => enrollconst enroll: (vars: string) => Promise<string | undefined>
('Defense against the Dark Arts')} disabled(property) JSX.ButtonHTMLAttributes<HTMLButtonElement>.disabled?: boolean | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
} >
Enroll
</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when(property) when: boolean | null | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
}> <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>Enrolling...</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when={enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.error}> <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>{enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.error.message}</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
> </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> );
}
Although we recommend using progressively enhanced forms on the server whenever possible, we can still take advantage of running actions on the client and used enhanced forms. This is ideal when you need to run an action or API request that can only be done in the browser.
To accomplish this we need to pass information to our action using form elements like <input>
. Any data need to be sent that end users don't enter can be added with an <input>
with type="hidden"
.
routes/enrollment.tsx
tsx
import { createRouteAction(alias) function createRouteAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteAction<T, U> (+1 overload)
import createRouteAction
} from "solid-start"; import { ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
} from 'solid-js';
function EnrollmentPagefunction EnrollmentPage(): JSX.Element
() { const [enrollingconst enrolling: {
pending: boolean;
input?: FormData | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
, { Formconst Form: ParentComponent<FormData | FormProps>
}] = createRouteAction(alias) createRouteAction<FormData, void>(fn: (args: FormData, event: ActionEvent) => Promise<void>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<...> (+1 overload)
import createRouteAction
(async (form(parameter) form: FormData
: FormDataProvides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to "multipart/form-data".
interface FormData
) => { const data = await enrollInClassfunction enrollInClass(className: string): Promise<void>
(form(parameter) form: FormData
.get(method) FormData.get(name: string): FormDataEntryValue | null
('email') as string) });
return (
<Formconst Form: ParentComponent<FormData | FormProps>
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when={enrollingconst enrolling: {
pending: boolean;
input?: FormData | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.error}> There was an error while enrolling: {enrollingconst enrolling: {
pending: boolean;
input?: FormData | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.error.message} </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
>
<input(property) JSX.HTMLElementTags.input: JSX.InputHTMLAttributes<HTMLInputElement>
id(property) JSX.HTMLAttributes<HTMLInputElement>.id?: string | undefined
="email" name(property) JSX.InputHTMLAttributes<HTMLInputElement>.name?: string | undefined
="email" type(property) JSX.InputHTMLAttributes<HTMLInputElement>.type?: string | undefined
="email" /> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
type(property) JSX.ButtonHTMLAttributes<HTMLButtonElement>.type?: "button" | "submit" | "reset" | undefined
="submit" disabled(property) JSX.ButtonHTMLAttributes<HTMLButtonElement>.disabled?: boolean | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: FormData | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
}> Enroll
</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> </Formconst Form: ParentComponent<FormData | FormProps>
> );
}
routes/enrollment.tsx
tsx
import { createRouteAction(alias) function createRouteAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteAction<T, U> (+1 overload)
import createRouteAction
} from "solid-start"; import { ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
} from 'solid-js';
function EnrollmentPagefunction EnrollmentPage(): JSX.Element
() { const [enrollingconst enrolling: {
pending: boolean;
input?: FormData | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
, { Formconst Form: ParentComponent<FormData | FormProps>
}] = createRouteAction(alias) createRouteAction<FormData, void>(fn: (args: FormData, event: ActionEvent) => Promise<void>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<...> (+1 overload)
import createRouteAction
(async (form(parameter) form: FormData
: FormDataProvides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to "multipart/form-data".
interface FormData
) => { const data = await enrollInClassfunction enrollInClass(className: string): Promise<void>
(form(parameter) form: FormData
.get(method) FormData.get(name: string): FormDataEntryValue | null
('email') as string) });
return (
<Formconst Form: ParentComponent<FormData | FormProps>
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
when={enrollingconst enrolling: {
pending: boolean;
input?: FormData | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.error}> There was an error while enrolling: {enrollingconst enrolling: {
pending: boolean;
input?: FormData | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.error.message} </ShowConditionally render its children or an optional fallback component
(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
when: T | undefined | null | false;
keyed?: false;
fallback?: JSX.Element;
children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show
>
<input(property) JSX.HTMLElementTags.input: JSX.InputHTMLAttributes<HTMLInputElement>
id(property) JSX.HTMLAttributes<HTMLInputElement>.id?: string | undefined
="email" name(property) JSX.InputHTMLAttributes<HTMLInputElement>.name?: string | undefined
="email" type(property) JSX.InputHTMLAttributes<HTMLInputElement>.type?: string | undefined
="email" /> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
type(property) JSX.ButtonHTMLAttributes<HTMLButtonElement>.type?: "button" | "submit" | "reset" | undefined
="submit" disabled(property) JSX.ButtonHTMLAttributes<HTMLButtonElement>.disabled?: boolean | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: FormData | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
}> Enroll
</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> </Formconst Form: ParentComponent<FormData | FormProps>
> );
}
We return a email value to tell the browser there was a successful submission so you can give visual feedback to your users or do anything else you may need.
Reference
createRouteAction(action, options)
Call createRouteAction
inside a component to create an action controller.
tsx
import { createRouteAction(alias) function createRouteAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteAction<T, U> (+1 overload)
import createRouteAction
} from 'solid-start';
function Componentfunction Component(): void
() { const [enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
, enrollconst enroll: ((vars: string) => Promise<string | undefined>) & {
Form: ParentComponent<string | FormProps>;
url: string;
}
] = createRouteAction(alias) createRouteAction<string, string>(fn: (args: string, event: ActionEvent) => Promise<string>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<...> (+1 overload)
import createRouteAction
(enrollInClassfunction enrollInClass(className: string): Promise<string>
); }
tsx
import { createRouteAction(alias) function createRouteAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteAction<T, U> (+1 overload)
import createRouteAction
} from 'solid-start';
function Componentfunction Component(): void
() { const [enrollingconst enrolling: {
pending: boolean;
input?: string | undefined;
result?: string | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
, enrollconst enroll: ((vars: string) => Promise<string | undefined>) & {
Form: ParentComponent<string | FormProps>;
url: string;
}
] = createRouteAction(alias) createRouteAction<string, string>(fn: (args: string, event: ActionEvent) => Promise<string>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<...> (+1 overload)
import createRouteAction
(enrollInClassfunction enrollInClass(className: string): Promise<string>
); }
createRouteAction
is a hook that returns a tuple of two values: The first item is a reactive object maintaining the state of the submission of the action, along with some helpers. The second item in the tuple is a function used to dispatch the action.
The second item also has another property called Form
which is a progressively enhanced version of the form
element. It is a component that can be used to submit the action, and a url
can be passed to be the action
of the form
element when JS is not available.
Returns
enrolling
is a Submission
with the following properties:
pending
- A boolean indicating if the action is currently being performed.error
- An error object if the action failed.input
- The input that was passed to the action.result
- The data returned from the action.- And the following methods:
retry()
- Resets the submission with the same input.clear()
- Clears the state of the submission.
enroll
is a function that takes the input to the action and dispatches the action. It returns a promise that resolves to the result of the action.
- And the following helpers:
Form
: A form
smart component to help make using forms easier.url
: A URL string that can be passed to be the action of the form element when JS is not available.
This is the behavior of the enroll
function:
