Why Passing data to partials in Ruby on Rails? - Purpose & Use Cases

The Big Idea

Discover how passing data to partials can save you hours of repetitive work and headaches!

The Scenario

Imagine you have a webpage with many repeated sections, like user profiles, and you want to show different details for each user by copying and pasting the same HTML code everywhere.

The Problem

Manually copying HTML for each section is tiring, easy to make mistakes, and if you want to change the layout, you must update every copy separately, which wastes time and causes bugs.

The Solution

Passing data to partials lets you write the HTML once and send different information to it each time, so the partial updates automatically based on the data it receives.

Before vs After

✗ Before

<%= render 'user_profile' %> <!-- but no data passed, so you must duplicate code -->

✓ After

<%= render partial: 'user_profile', locals: { user: @user } %> <!-- partial uses passed user data -->

What It Enables

This makes your code cleaner, easier to maintain, and lets you reuse components with different data effortlessly.

Real Life Example

Think of a social media app showing many user cards on a page, each with unique info but the same layout, all handled by one partial receiving different user data.

Key Takeaways

Manual duplication of HTML is slow and error-prone.

Partials with data passing let you reuse templates with different content.

This improves code clarity and reduces bugs.

Practice

1. What is the main purpose of using locals when rendering partials in Rails?

easy

A. To create a new controller action

B. To include JavaScript files in the partial

C. To define CSS styles for the partial

D. To pass data as local variables to the partial

Solution

1. Step 1: Understand partials in Rails

   Partials are reusable view templates that help keep code DRY (Don't Repeat Yourself).

2. Step 2: Role of locals

   The locals option lets you pass data as local variables to the partial, making it flexible and dynamic.

3. Final Answer:

   To pass data as local variables to the partial -> Option D

4. Quick Check:

   Passing data to partials = locals [OK]

Hint: Remember: locals pass data inside partials [OK]

Common Mistakes:

• Confusing locals with JavaScript or CSS inclusion
• Thinking partials create controller actions
• Assuming locals define styles

2. Which of the following is the correct syntax to pass a local variable named user with value @user to a partial called _profile.html.erb?

easy

A. <%= render partial: profile, user: @user %>

B. <%= render 'profile', locals: { user: @user } %>

C. <%= render profile, user: @user %>

D. <%= render partial: 'profile', locals: user: @user %>

Solution

1. Step 1: Identify correct render syntax with locals

   The correct way to pass locals is using locals: { key: value } inside the render call.

2. Step 2: Check each option

   <%= render 'profile', locals: { user: @user } %> uses locals: { user: @user } which is correct syntax. Others miss the locals hash or have wrong syntax.

3. Final Answer:

   <%= render 'profile', locals: { user: @user } %> -> Option B

4. Quick Check:

   Use locals hash to pass variables [OK]

Hint: Use locals: { var: value } to pass data [OK]

Common Mistakes:

• Omitting the locals keyword
• Passing variables directly without locals hash
• Incorrect hash syntax for locals

3. Given the following code in a Rails view:

user = User.new(name: 'Alice')
<%= render 'user_info', locals: { user: user } %>

And the partial _user_info.html.erb contains:

<p>Name: <%= user.name %></p>

What will be the rendered output?

medium

A. Name: Alice

B. Name:

C. Error: undefined local variable 'user'

D. Name: user

Solution

1. Step 1: Understand locals passing

   The variable user is passed as a local variable to the partial with value User.new(name: 'Alice').

2. Step 2: Partial uses user.name

   The partial accesses user.name, which is 'Alice', so it renders the name correctly.

3. Final Answer:

   <p>Name: Alice</p> -> Option A

4. Quick Check:

   Locals pass data correctly = Alice shown [OK]

Hint: Locals become variables inside partial [OK]

Common Mistakes:

• Forgetting to pass locals causes undefined variable error
• Assuming instance variables are automatically available
• Confusing variable names inside partial

4. Identify the error in this code snippet:

<%= render partial: 'comment', locals: { comment: @comment } %>

# In _comment.html.erb
<p><%= comment_text %></p>

What will happen when this view is rendered?

medium

A. Error: undefined local variable or method 'comment_text'

B. Renders the comment text correctly

C. Syntax error in render call

D. Renders nothing inside the paragraph

Solution

1. Step 1: Check locals passed to partial

   The locals hash passes comment: @comment, so inside the partial the variable comment is available.

2. Step 2: Check variable used in partial

   The partial uses comment_text, which is not defined or passed, causing an undefined variable error.

3. Final Answer:

   Error: undefined local variable or method 'comment_text' -> Option A

4. Quick Check:

   Variable name mismatch causes error [OK]

Hint: Variable names must match locals keys exactly [OK]

Common Mistakes:

• Using wrong variable name inside partial
• Assuming instance variables are available without passing
• Not passing required locals

5. You want to render a list of products using a partial _product.html.erb and pass each product as a local variable named item. Which code correctly renders the list with locals?

hard

A. <%= render product, collection: @products, as: :item %>

B. <%= render partial: 'product', collection: @products, locals: { item: product } %>

C. <%= render partial: 'product', collection: @products, as: :item %>

D. <% @products.each do |p| %>
<%= render 'product', locals: { item: product } %>
<% end %>

Solution

1. Step 1: Understand rendering collections with locals

   Rails allows rendering a collection with render partial: 'name', collection: array, as: :var to pass each element as a local variable.

2. Step 2: Check each option

   <%= render partial: 'product', collection: @products, as: :item %> correctly uses partial, collection, and as: :item to pass each product as item local variable. The <% @products.each do |p| %> <%= render 'product', locals: { item: product } %> <% end %> uses manual loop but product is undefined (loop var is p). The <%= render partial: 'product', collection: @products, locals: { item: product } %> has wrong locals usage (product undefined). The <%= render product, collection: @products, as: :item %> misses partial keyword and unquoted product undefined.

3. Final Answer:

   <%= render partial: 'product', collection: @products, as: :item %> -> Option C

4. Quick Check:

   Use collection + as for locals in partial [OK]

Hint: Use collection and as: :var for lists [OK]

Common Mistakes:

• Passing locals inside collection render incorrectly
• Forgetting to use as: to rename local variable
• Using manual loops instead of collection render