_food.html.erb

<ul class="food">
  <% items.each do |item| %>
    <li>
      <span><%= item.name %></span>
      <span class="kind"><%= item.kind %></span>
    </li>
  <% end %>
</ul>

food_controller.js

import { Controller } from "stimulus";
import axios from "axios";

export default class extends Controller {
  static targets = ["food"];

  connect() {
    console.log("connected");
  }

  async filter(event) {
    const kinds = [...event.target.selectedOptions].map(opt => opt.value);
    const newFood = await axios.get("/food", { params: { kinds } });
    this.foodTarget.innerHTML = newFood.data;
  }
}

food_controller.rb

class FoodController < ApplicationController
  def index
    @food = Food.where(kind: params[:kinds])
    render partial: "food", locals: { items: @food }
  end
end

home_controller.rb

class HomeController < ApplicationController
  def index
    @food = Food.where(kind: "fruit")
  end
end

index.html.erb

<h1>Rails + Stimulus + React</h1>

<div data-controller="food">
  <%= select_tag "kinds",
                 options_for_select(Food.kinds.keys, "fruit"),
                 multiple: true,
                 data: { action: "change->food#filter" } %>

  <div data-target="food.food">
    <%= render "food/food", items: @food %>
  </div>
</div>