Rails 6, ActionCable display data contains HTML tags - ruby-on-rails-6

Question

I'm trying to use a partial via ActionCable as follows:
#app/channels/comments_channel.rb
class CommentsChannel < ApplicationCable::Channel
def self.broadcast(comment)
broadcast_to comment.post, comment:
CommentsController.render(partial: 'comments/comment', locals: { comment: comment})
end
def subscribed
stream_for Post.last
end
def unsubscribed
# Any cleanup needed when channel is unsubscribed
end
end
here is the JS part:
#app/javascript/comments_channel.js
import consumer from "./consumer"
consumer.subscriptions.create("CommentsChannel", {
connected() {
// Called when the subscription is ready for use on the server
},
disconnected() {
// Called when the subscription has been terminated by the server
},
received(data) {
const commentsId = document.getElementById('comments');
commentsId.append(data.comment);
}
});
callin it in the CommentsController:
#app/controllers/comments_controller.rb
...
def create
comment = #post.comments.create! comments_params
CommentsMailer.submitted(comment).deliver_later
CommentsChannel.broadcast(comment)
redirect_to #post
end
and finally, the comments/_comment partial:
#app/views/comments/_comment.html.erb
<p><%= comment.body%>--<%= comment.created_at.to_s(:long)%></p>
It works but displays HTML tags when posting a new comment. If I reload the page, no HTML tags displayed:
What am I missing?

Answer 1

The solution that worked for me was to use insertAdjacentHTML as follows in the comments_channel.js:
#app/javascripts/channels/comments_channel.js
import consumer from "./consumer"
consumer.subscriptions.create("CommentsChannel", {
...
received(data) {
const commentsId = document.getElementById('comments');
commentsId.insertAdjacentHTML('beforeend', data.comment);
}
Hope this helps.