Forms and mutations in Deno - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when this Deno Fresh form is submitted?

Consider this Deno Fresh form component. What will be the value of formData.get('username') inside the handler after submission?

Deno

import { Handlers } from "https://deno.land/x/fresh@1.1.5/server.ts";

export const handler: Handlers = {
  async POST(req) {
    const formData = await req.formData();
    return new Response(formData.get('username'));
  }
};

export default function Page() {
  return (
    <form method="POST">
      <input name="username" defaultValue="denoUser" />
      <button type="submit">Send</button>
    </form>
  );
}

A "denoUser"

B null

C undefined

D Throws a runtime error

💡 Hint

Think about what formData.get returns when the input has a value.

The form sends the input named username with value denoUser. The formData.get('username') returns that string.

❓ state_output

intermediate

What is the output after this mutation updates the state?

Given this Deno Fresh handler that updates a counter from a form submission, what will be the response text after submitting with count=5?

Deno

import { Handlers } from "https://deno.land/x/fresh@1.1.5/server.ts";

let counter = 0;

export const handler: Handlers = {
  async POST(req) {
    const formData = await req.formData();
    const count = Number(formData.get('count'));
    counter += count;
    return new Response(`Counter is now ${counter}`);
  }
};

A Throws a TypeError

B Counter is now 0

C Counter is now NaN

D Counter is now 5

💡 Hint

Remember that formData.get returns a string and you convert it to a number.

The formData.get('count') returns the string '5'. Converting it to Number gives 5. Adding 5 to the initial counter 0 results in 5.

📝 Syntax

advanced

Which option correctly handles form data mutation in Deno Fresh?

Which of the following code snippets correctly reads form data and updates a user object in a Deno Fresh POST handler?

A const formData = await req.formData(); const name = formData.get('name'); user.name = name;

B const formData = req.formData(); const name = formData.get('name'); user.name = name;

C const formData = await req.json(); const name = formData.name; user.name = name;

D const formData = await req.formData; const name = formData.get('name'); user.name = name;

💡 Hint

Check which method returns a promise and how to correctly access form data.

Option A correctly awaits req.formData() which returns a promise, then gets the 'name' field. Option A misses await, C uses json() which is incorrect for form data, D misses parentheses on formData call.

🔧 Debug

advanced

Why does this Deno Fresh form handler throw an error?

Given this handler code, why does it throw a TypeError: formData.get is not a function?

Deno

export const handler = {
  async POST(req) {
    const formData = req.formData();
    const email = formData.get('email');
    return new Response(email);
  }
};

A Because formData is undefined due to missing import

B Because req.formData() returns a promise and must be awaited before calling get()

C Because get() is not a method on formData objects

D Because POST handlers cannot access form data

💡 Hint

Check if the formData variable is a promise or the actual data object.

req.formData() returns a promise. Without await, formData is a promise object, which does not have get() method, causing the TypeError.

🧠 Conceptual

expert

How does Deno Fresh handle form mutations in server-side handlers?

Which statement best describes how form mutations are processed in Deno Fresh server-side handlers?

A Form data is automatically bound to component state without explicit parsing in handlers

B Form mutations are handled client-side only; server handlers cannot access form data

C Form data is parsed asynchronously from the request, then mutations can update server state before returning a response

D Form data is sent as JSON by default and parsed synchronously in handlers

💡 Hint

Think about how HTTP requests and form data work in server handlers.

Deno Fresh handlers receive the HTTP request, parse form data asynchronously, and can mutate server state before sending a response. Client-side binding is manual, and form data is not JSON by default.

Practice

1. What does the req.formData() method do in a Deno server context?

easy

A. It reads and returns the submitted form data from the request.

B. It sends form data back to the client.

C. It validates the form data automatically.

D. It clears the form data from the request.

Solution

1. Step 1: Understand the purpose of req.formData()

   This method is designed to extract form data sent by the client in a POST request.

2. Step 2: Identify what the method returns

   It returns a FormData object containing key-value pairs from the submitted form.

3. Final Answer:

   It reads and returns the submitted form data from the request. -> Option A

4. Quick Check:

   Form data reading = It reads and returns the submitted form data from the request. [OK]

Hint: Remember: formData() reads input, it doesn't send or clear it [OK]

Common Mistakes:

• Thinking formData() sends data to client
• Assuming formData() validates data automatically
• Believing formData() clears data from request

2. Which of the following is the correct way to asynchronously get form data from a request in Deno?

easy

A. const data = await req.formData();

B. const data = req.getFormData();

C. const data = req.formData();

D. const data = await req.getFormData();

Solution

1. Step 1: Recall the method signature for formData()

   In Deno, req.formData() returns a Promise, so it must be awaited.

2. Step 2: Identify the correct syntax

   The correct syntax uses await req.formData(); to get the form data asynchronously.

3. Final Answer:

   const data = await req.formData(); -> Option A

4. Quick Check:

   Async form data retrieval = const data = await req.formData(); [OK]

Hint: Always await formData() since it returns a Promise [OK]

Common Mistakes:

• Forgetting to use await with formData()
• Using a non-existent method getFormData()
• Calling formData() without async context

3. Given this Deno server code snippet handling a POST request:

const formData = await req.formData();
const name = formData.get('name');
return new Response(`Hello, ${name}!`);

What will be the response if the form submitted has name=Alice?

medium

A. Hello, !

B. Hello, undefined!

C. Hello, null!

D. Hello, Alice!

Solution

1. Step 1: Extract the 'name' value from formData

   The code uses formData.get('name') which returns the string 'Alice' from the submitted form.

2. Step 2: Construct the response string

   The response template string inserts 'Alice' correctly, resulting in 'Hello, Alice!'.

3. Final Answer:

   Hello, Alice! -> Option D

4. Quick Check:

   formData.get('name') = 'Alice' [OK]

Hint: formData.get('key') returns the submitted value or null if missing [OK]

Common Mistakes:

• Assuming get() returns undefined instead of null
• Not using await with formData() causing errors
• Misreading template string interpolation

4. Identify the error in this Deno code snippet handling form submission:

const formData = req.formData();
const email = formData.get('email');
return new Response(email);

medium

A. Response cannot return a string directly.

B. formData.get() is not a valid method on FormData.

C. Missing await before req.formData() causing a Promise error.

D. The variable email is not declared.

Solution

1. Step 1: Check how formData() is called

   The method req.formData() returns a Promise and must be awaited.

2. Step 2: Identify the error caused by missing await

   Without await, formData is a Promise, so calling get() on it causes a runtime error.

3. Final Answer:

   Missing await before req.formData() causing a Promise error. -> Option C

4. Quick Check:

   Always await formData() to get FormData object [OK]

Hint: Always await async calls like formData() before using results [OK]

Common Mistakes:

• Calling get() on a Promise instead of FormData
• Assuming formData() is synchronous
• Ignoring async/await syntax rules

5. You want to update a user's profile using a form in Deno. The form sends username and age. Which code correctly reads the form and updates a user object, ensuring age is stored as a number?

hard

A. const formData = await req.formData(); const user = { username: formData.get('username'), age: formData.get('age') };

B. const formData = await req.formData(); const user = { username: formData.get('username'), age: Number(formData.get('age')) };

C. const formData = req.formData(); const user = { username: formData.get('username'), age: parseInt(formData.get('age')) };

D. const formData = await req.formData(); const user = { username: formData.get('username'), age: parseFloat(formData.get('username')) };

Solution

1. Step 1: Await formData() to get the form data object

   Using await req.formData() correctly retrieves the form data asynchronously.

2. Step 2: Convert the 'age' string to a number properly

   Using Number(formData.get('age')) converts the age string to a number safely.

3. Step 3: Check the username assignment

   Assigning username: formData.get('username') correctly stores the username string.

4. Final Answer:

   const formData = await req.formData(); const user = { username: formData.get('username'), age: Number(formData.get('age')) }; -> Option B

5. Quick Check:

   Await + Number conversion = const formData = await req.formData(); const user = { username: formData.get('username'), age: Number(formData.get('age')) }; [OK]

Hint: Always await formData() and convert numeric strings with Number() [OK]

Common Mistakes:

• Not awaiting formData() causing errors
• Storing age as string without conversion
• Parsing wrong field for age