【Rails】でジャンル別表示機能を実装したいのですが、思うようにいかず困っています。

Question

コントローラー(recipe)

app/controllers/recipes_controller.rb

class RecipesController < ApplicationController
  
  def index
    @recipe = Recipe.all.order(id: 'DESC')
  end

  def new
    @recipe = Recipe.new
  end

  def create
    @recipe = Recipe.new(recipe_params)
    if @recipe.save
      redirect_to root_path
    else
      render :new
    end
  end

  private

  def recipe_params
    params.require(:recipe).permit(:image, :name, :genre_id, :food, :seasoning, :procedure).merge(user_id: current_user.id)
  end

end

モデル(recipe)

app/models/recipe.rb

class Recipe < ApplicationRecord
  # バリデーション
  
  # 空のカラムは保存ができない
  validates :name, :image, :genre, :food, :seasoning, :procedure, presence: true
  # ジャンルの選択が「---」の時は保存できないようにする
  validates :genre_id, numericality: { other_than: 1 }

  # アソシエーション
  
  belongs_to :user
  has_one_attached :image

  extend ActiveHash::Associations::ActiveRecordExtensions
  belongs_to_active_hash :genre
end

モデル(genre)

app/models/genre.rb

class Genre < ActiveHash::Base
  self.data = [
    {id: 1, name: '---'}, {id: 2, name: '和食'}, {id: 3, name: '洋食'}, {id: 4, name: '中華料理'}
  ]
end

前提・実現したいこと

Railsでレシピサイトアプリを作成しています。トップページにレシピのジャンル別で表示したいのですが以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

undefined method `genre' for #<Recipe::ActiveRecord_Relation:0x00007faf56997688>

該当のソースコード

app/views/recipes/index.html.erb

<!-- 和食のレシピを表示する -->
  <div class="wa-content">
  <% if @recipe.present? && @recipe.genre.id == 2 %>
    <%# 投稿されたレシピありかつレシピのジャンルが和食の時のみ表示される %>
    <% @recipe.each do |recipe| %>
    <h2 class="heading-name">
      <%= recipe.genre.name %>
    </h2>
    <ul class="wa-recipe">
      <li class="recipe">
        <%= image_tag recipe.image, class:"recipe-image" %>
        <h4 class="recipe-name">
          <%= recipe.name %>
        </h4>
      </li>
    </ul>
    <% end %>
    <%# 投稿されたレシピがあり、かつレシピのジャンルが和食の時のみ表示される %>
  <% else %>
   <%# 投稿されたレシピがなければ表示される  %>
    <h2 class="heading-name">
      和食
    </h2>
    <ul class="wa-recipe">
      <li class="recipe">
        <%= image_tag "bousai_nikujaga.png", class:"recipe-image" %>
        <h4 class="recipe-name">肉じゃが</h4>
      </li>
    </ul>
    <%# 投稿されたレシピがなければ表示される  %>
  <% end %>
  </div>
  <!-- 和食のレシピを表示する -->

試したこと

アソシエーションの記述の確認、ターミナル上にてrails cで確認したところ、@recipe.genre.idでしっかり表示されることも確認。

補足情報（FW/ツールのバージョンなど）

レシピのcreateアクションまではできていてデーターベースにも保存がされていることを確認。genreモデルはactive_hashにてアソシエーション済み。

Answer 1

@recipe = Recipe.all.order(id: 'DESC')　この @recipe が単数形なのが諸悪の根源ですね。

ここでエラーになります。
<% if @recipe.present? && @recipe.genre.id == 2 %>

genreは Recipeのインスタンスにあるmethodでその集合体にはありません。
<% if @recipe.present? && @recipe.genre.id == 2 %>
ここではどういう場合にifを成立させたいのですか？

ということですと

def index
    @recipes = Recipe.all.order(id: 'DESC')
end

複数形にしていただいて
<% if @recipe.present? && @recipe.genre.id == 2 %> <% @recipe.each do |recipe| %>
の所を
<% @recipes.group_by{|recipe| recipe.genre_id }.each do |genreid,recipes| %> <% recipes.each do |recipe| %>
として見てください。
do-endのくくり忘れないでください

Comments

[tera0502]

ご回答いただきありがとうございます。一応、if文ではもしレシピが投稿され、存在してかつそのジャンルが和食だった場合のみ和食のレシピを展開するという試みで記述しました。

[winterboum]

和食だけ表示ですか？
それとも全レシピをジャンル毎に一覧ですか？

[tera0502]

全レシピをジャンル毎に一覧する予定です。なので、和食レシピの次にgenre_id のif文を変更して洋食、中華料理を表示する予定です