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.