ApplyForm() — astro Function Reference

Architecture documentation for the ApplyForm() function in ApplyForm.tsx from the astro codebase.

Function tsx E2ETesting TestFixtures

Entity Profile

E2ETesting→ TestFixtures→ ApplyForm() — astro Function Reference

Dependency Diagram

graph TD
  0e621224_1746_462b_19b6_abeaf8777d8f["ApplyForm()"]
  ed5af1ac_b7b5_7a73_06a4_846587e5f094["ApplyForm.tsx"]
  0e621224_1746_462b_19b6_abeaf8777d8f -->|defined in| ed5af1ac_b7b5_7a73_06a4_846587e5f094
  style 0e621224_1746_462b_19b6_abeaf8777d8f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/e2e/fixtures/actions-blog/src/components/ApplyForm.tsx lines 4–41

export function ApplyForm() {
	const [result, setResult] = useState<any>(null);

	return (
		<form
			method="POST"
			data-testid="apply-form"
			action={actions.blog.apply.toString()}
			onSubmit={async (e) => {
				e.preventDefault();
				const form = e.target as HTMLFormElement;
				const formData = new FormData(form);
				const { data, error } = await actions.blog.apply(formData);

				if (error) {
					console.error('Error:', error);
				} else {
					setResult(data);
					form.reset();
				}
			}}
		>
			<label htmlFor="name">Name</label>
			<input id="name" type="text" name="name" placeholder="Your name" />

			<label htmlFor="email">Email</label>
			<input id="email" type="email" name="email" placeholder="your.email@example.com" />

			<button type="submit">Submit</button>

			{result && (
				<div data-testid="result">
					<p>Submitted: {result.name} ({result.email})</p>
				</div>
			)}
		</form>
	);
}