Partials are reusable HTML files that can be rendered within the application. You'll see how they work in a second.

First, let's create a file called _likes.html.erb in the app/views/posts folder. Make sure the file name starts with _.

Next, inside of index.html.erb, we have the following piece of code - let's move the following lines of code into the _likes.html.erb file:

<div class="px-2">
  <% if current_user.present? %>
    <% if current_user.voted_up_on? post %>
      <%= link_to post_downvotes_path(post.id), data: { turbo_method: :post } do %>
        <svg xmlns="http://www.w3.org/2000/svg" fill="red" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="w-6 h-6">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
        </svg>
      <% end %>
    <% else %>
      <%= link_to post_upvotes_path(post.id), data: { turbo_method: :post } do %>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="w-6 h-6">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
        </svg>
      <% end %>
    <% end %>

  <% else %>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="w-6 h-6">
      <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
    </svg>
  <% end %>
  <%= pluralize post.get_likes.size, "like" %>
</div>

Next, inside index.html.erb above the form for creating new comments, let's add the following line of code:

<%= render partial: 'likes', locals: {post: post} %>

Your index.html.erb should now look something like this:

<!-- code above -->

<%= render partial: 'likes' %>

<%= simple_form_for Comment.new, url: post_comments_path(post), method: :post do |f| %>

<!-- some code below -->

Let's save the file and refresh the page. We can see that nothing has changed.

You can render partials by calling <%= render partial: 'partial_file_name_without_underscore' %>. To clarify, the filename of partials must start with an underscore (_). When you render the partial, there is no need to put in the _ in the beginning of the file name.

For example, we created a _likes.html.erb file, but we can render it with <%= render partial: 'likes' %>.

Why Use a Partial?

You're probably now wondering why one would use a partial.

The answer is because it allows us to keep our HTML code DRY (Don't Repeat Yourself). By creating a partial, you can render the HTML code anywhere in the application.

If we have similar HTML code, then instead of copy and pasting all over the place, we can place it in a partial and render it where we need to.

Now that we stored the HTML in a partial, what we can do is write some JavaScript to re-render only the partial of the post.