How to use view_component inside stimulus controller

Viewed 46

Hi I am beginner in ROR and working on very simple project using view_components and stimulus js. I have InputCommentComponent view_component which I wanted to append as a child node in div by stimulus controller on click of Some button. But my component is undefined inside stimulus controller. How can I access it and append to div.

//input_comment_compopnent.html.erb
<%= form_with(model: @comment, local: true,  data: { turbo: false}) do |f| %>
  <div class="mb-4">
    <%= f.text_field :description, :required => true, class: "mb-3 w-2/3 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500", placeholder: "Add Comment ..." %>
    <%= f.hidden_field :post_id, value: @post_id %>
    <%= f.hidden_field :user_id, value: @user_id %>
    <%= f.hidden_field :reply_to, value: @reply_to %>
    <div class='sm:flex sm:flex-row-reverse mb-4 w-2/3'>
      <%= f.submit 'Submit', class: "inline-flex items-center justify-center px-4 py-2 bg-brand-primary font-semibold capitalize text-white hover:bg-brand-primary-hover active:bg-brand-primary disabled:opacity-25 transition" %>
    </div>
  </div>
<% end %>

// input_comment_component.rb
class Input::InputCommentComponent < ViewComponent::Base
  def initialize(comment: nil, post_id: nil, user_id: nil, reply_to: nil)
    @comment = comment
    @post_id = post_id
    @user_id = user_id
    @reply_to = reply_to
  end

end

//comment_controller.js
import {Controller} from '@hotwired/stimulus'

export default class extends Controller {
  static targets = ['wrapper']

  addComment() {
    this.wrapperTarget.appendChild(Input::InputCommentComponent.new)
    // or
    this.wrapperTarget.appendChild(render(Input::InputCommentComponent.new))

  }
}

But I can't access component inside controller and getting some syntax error as attached. enter image description here

Any help or hint would be Appreciated.

1 Answers

You cant render a view component component inside stimulus, because the component need to be rendered as server side and when you are working with stimulus you are working at client side. So you should use a turbo frame (https://turbo.hotwired.dev/) to render this component async.

  • First create a turbo frame end-points.
  • After that create a request to call this turbo end-point and append the html code
Related