Why Remix forms work without JavaScript - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Remix form that submits data.

Remix

<Form method=[1]>
  <input name="username" />
  <button type="submit">Submit</button>
</Form>

Drag options to blanks, or click blank then click option'

A"post"

B"get"

C"put"

D"delete"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' method which appends data to the URL instead of sending it in the request body.

Remix forms use the method="post" attribute to submit data to the server without JavaScript.

2fill in blank

medium

Complete the code to import the Remix form component correctly.

Remix

import { [1] } from "@remix-run/react";

Drag options to blanks, or click blank then click option'

AOutlet

BLink

CForm

DuseLoaderData

Attempts:

3 left

💡 Hint

Common Mistakes

Importing components unrelated to forms like 'Link' or 'Outlet'.

The Form component is imported from @remix-run/react to create forms that work without JavaScript.

3fill in blank

hard

Fix the error in the action function to handle form data correctly.

Remix

export async function action({ request }) {
  const formData = await request.[1]();
  const username = formData.get("username");
  return { username };
}

Drag options to blanks, or click blank then click option'

AformData

Bjson

CformData()

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Selecting 'formData()' which results in an invalid double function call request.formData()().

Using 'json' or 'text' which are not correct for form data.

The request.formData() method reads the submitted form data in Remix action functions.

4fill in blank

hard

Fill both blanks to create a form that submits without JavaScript and displays the submitted username.

Remix

import { [1] } from "@remix-run/react";

export default function UserForm() {
  return (
    <>
      <[2] method="post">
        <input name="username" placeholder="Enter name" />
        <button type="submit">Send</button>
      </[2]>
    </>
  );
}

Drag options to blanks, or click blank then click option'

AForm

Bform

CLink

DOutlet

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'form' tag in JSX instead of 'Form', which uses a native HTML form instead of the Remix Form component.

Importing wrong components like 'Link' or 'Outlet'.

The Form component from Remix is used to create forms that work without JavaScript, and it renders as a standard HTML form element.

5fill in blank

hard

Fill all three blanks to handle form submission and display the submitted username without JavaScript.

Remix

import { [1] } from "@remix-run/react";
import { useActionData } from "@remix-run/react";

export async function action({ request }) {
  const formData = await request.[2]();
  const username = formData.get("username");
  return { username };
}

export default function UserForm() {
  const data = useActionData();
  return (
    <>
      <[3] method="post">
        <input name="username" placeholder="Enter name" />
        <button type="submit">Submit</button>
      </[3]>
      {data?.username && <p>Hello, {data.username}!</p>}
    </>
  );
}

Drag options to blanks, or click blank then click option'

AForm

BformData

Cform

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'json' instead of 'formData' to read form data.

Using lowercase 'form' tag in JSX instead of 'Form' component.

The Form component is imported to create the form, request.formData() reads the submitted data, and the JSX uses the Form component tag.