res.render for templates in Express - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Express code output in the browser?

Consider this Express route handler using res.render. What will the user see in their browser when they visit /welcome?

Express

app.get('/welcome', (req, res) => {
  res.render('welcome', { name: 'Alice' });
});

// Assume 'welcome' template contains: <h1>Hello, <%= name %>!</h1>

A Error: Template not found

B <h1>Hello, name!</h1>

C <h1>Hello, Alice!</h1>

D <h1>Hello, undefined!</h1>

💡 Hint

Look at how the variable name is passed to the template and how it is used inside.

The res.render method sends the rendered HTML of the 'welcome' template to the browser. The template uses <%= name %> to insert the value of name passed in the object. Since name is 'Alice', the output is <h1>Hello, Alice!</h1>.

📝 Syntax

intermediate

Which option correctly uses res.render to send a template with data?

You want to render the 'profile' template and pass the user's age as 30. Which code snippet is correct?

A res.render('profile', age=30);

B res.render('profile', { age: 30 });

C res.render('profile', ['age', 30]);

D res.render('profile', age: 30);

💡 Hint

Remember that the second argument to res.render must be an object with key-value pairs.

The res.render method expects the second argument to be an object containing data for the template. Option B correctly passes an object with age: 30. Other options use incorrect syntax.

🔧 Debug

advanced

Why does this res.render call cause an error?

Look at this Express route:

app.get('/dashboard', (req, res) => {
  res.render('dashboard', { user: userData });
});

Assuming userData is not defined anywhere, what error will occur?

A ReferenceError: userData is not defined

B TypeError: res.render is not a function

C SyntaxError: Unexpected token {

D Error: Template 'dashboard' not found

💡 Hint

Check if all variables used inside res.render are declared.

The variable userData is used but never declared or assigned. This causes a ReferenceError when the code tries to access it.

❓ state_output

advanced

What is the rendered output of this Express route with conditional data?

Given this route and template, what will the browser display when visiting /status? Route:

app.get('/status', (req, res) => {
  const isLoggedIn = false;
  res.render('status', { loggedIn: isLoggedIn });
});

Template 'status':

<% if (loggedIn) { %>
  
Welcome back!
<% } else { %>
  
Please log in.
<% } %>

A <p>Welcome back!</p>

B Error: loggedIn is not defined

C <p>loggedIn is false</p>

D <p>Please log in.</p>

💡 Hint

Check the value of loggedIn and how the template uses it in the if statement.

The variable loggedIn is false. The template shows the else block, so the output is <p>Please log in.</p>.

🧠 Conceptual

expert

Which statement about res.render in Express is TRUE?

Choose the correct statement about how res.render works in Express.

A <code>res.render</code> sends the rendered HTML to the client and ends the response automatically.

B <code>res.render</code> only compiles the template but does not send any response to the client.

C <code>res.render</code> requires the template file to be in the public folder to work.

D <code>res.render</code> can only be used with EJS templates, not with other engines.

💡 Hint

Think about what happens after calling res.render in an Express route.

res.render compiles the template with data, sends the resulting HTML to the client, and ends the response. It works with any configured template engine and templates are usually stored in the views folder, not public.

Practice

1. What does res.render do in an Express app?

easy

A. It creates and sends an HTML page using a template and data.

B. It sends a JSON response to the client.

C. It redirects the user to another URL.

D. It logs a message to the server console.

Solution

1. Step 1: Understand the purpose of res.render

   res.render is used to create a web page by combining a template with data.

2. Step 2: Identify what res.render sends to the client

   It sends the generated HTML page as the response to the user's browser.

3. Final Answer:

   It creates and sends an HTML page using a template and data. -> Option A

4. Quick Check:

   res.render = sends HTML page [OK]

Hint: Remember: res.render sends HTML, not JSON or redirects [OK]

Common Mistakes:

• Confusing res.render with res.json
• Thinking res.render redirects the user
• Assuming res.render logs info instead of sending response

2. Which of the following is the correct syntax to render a template named 'home' with a variable 'title' set to 'Welcome'?

easy

A. res.render('home', 'title', 'Welcome');

B. res.render('home', { title: 'Welcome' });

C. res.render('home', ['title', 'Welcome']);

D. res.render('home', title = 'Welcome');

Solution

1. Step 1: Check the method signature of res.render

   It takes the template name as first argument and an object with variables as second argument.

2. Step 2: Match the correct object syntax

   The correct way to pass variables is using an object like { title: 'Welcome' }.

3. Final Answer:

   res.render('home', { title: 'Welcome' }); -> Option B

4. Quick Check:

   res.render(template, object) = correct syntax [OK]

Hint: Pass variables as an object, not as separate arguments [OK]

Common Mistakes:

• Passing variables as separate arguments instead of an object
• Using array instead of object for variables
• Assigning variables inside the argument list incorrectly

3. Given this Express code snippet, what will the user see when visiting '/'?

app.get('/', (req, res) => {
  res.render('index', { name: 'Alice' });
});

Assuming the 'index' template contains: <h1>Hello, <%= name %>!</h1>

medium

A. Hello, Alice!

B. Hello, <%= name %>!

C. Error: Template not found

D. Hello, !

Solution

1. Step 1: Understand how res.render passes data to template

   The object { name: 'Alice' } provides the value for name in the template.

2. Step 2: Evaluate the template output

   The template uses <%= name %> to insert the value 'Alice' into the HTML.

3. Final Answer:

   <h1>Hello, Alice!</h1> -> Option A

4. Quick Check:

   Template variable replaced correctly =

   Hello, Alice!

   [OK]

Hint: Variables in template replaced by object keys passed to res.render [OK]

Common Mistakes:

• Expecting raw template tags to appear in output
• Assuming missing template causes silent empty output
• Confusing template syntax with HTML escaping

4. What is wrong with this Express code snippet?

app.get('/about', (req, res) => {
  res.render('about', title: 'About Us');
});

medium

A. res.render cannot be used inside app.get routes.

B. The template name 'about' should be a variable, not a string.

C. The second argument to res.render should be an object, but it's missing curly braces.

D. The route path '/about' is invalid.

Solution

1. Step 1: Check the syntax of res.render arguments

   The second argument must be an object with key-value pairs, but here it's written without curly braces.

2. Step 2: Identify the correct object syntax

   It should be { title: 'About Us' } to pass variables properly.

3. Final Answer:

   The second argument to res.render should be an object, but it's missing curly braces. -> Option C

4. Quick Check:

   res.render second argument = object with braces [OK]

Hint: Always wrap variables in an object with curly braces for res.render [OK]

Common Mistakes:

• Omitting curly braces around variables object
• Passing variables as separate arguments
• Misunderstanding route handler usage

5. You want to render a 'profile' template that shows a user's name and age. The user data is in an object user = { name: 'Bob', age: 30 }. Which code correctly renders the template passing the user data so the template can access name and age directly?

hard

A. res.render('profile', ['name', user.name, 'age', user.age]);

B. res.render('profile', { user });

C. res.render('profile', { name: user, age: user.age });

D. res.render('profile', { name: user.name, age: user.age });

Solution

1. Step 1: Understand how template variables are accessed

   The template expects variables name and age directly, not inside a nested object.

2. Step 2: Pass variables as separate keys in an object

   Passing { name: user.name, age: user.age } makes name and age available directly in the template.

3. Final Answer:

   res.render('profile', { name: user.name, age: user.age }); -> Option D

4. Quick Check:

   Pass variables as keys for direct template access [OK]

Hint: Pass each variable separately for direct template use [OK]

Common Mistakes:

• Passing the whole user object instead of separate keys
• Passing variables as an array instead of object
• Assuming template can access nested object keys without dot notation