Action-text-attachment tag not displaying on React front end

Question

I created a rails 6 Blog application using Action Text/Active Storage, the image loads fine on the rails server. But when i am using the api call to fetch the json and using the dangerouslySetInnerHtml afterwards in react to convert raw html, it is not rendering the image stored by Action Text in the db.

I know that react does not support the "Action-text-attachment" tag which is stored in the database, but can anyone refer a better workaround or suggestion through this method it has been driving me crazy.

Api Call

{
    "id": 5,
    "created_at": "2020-12-07T11:34:27.443Z",
    "updated_at": "2020-12-14T14:06:53.671Z",
    "title": "One in five deaths in North Wales now being caused by Covid-19",
    "topic_id": 1,
    "user_id": 1,
    "status_id": 2,
    "rich_text_body": {
    "id": 5,
    "name": "body",
    "body": "<div><action-text-attachment content-type=\"image\" url=\"https://i2-prod.dailypost.co.uk/incoming/article18128897.ece/ALTERNATES/s615/1_WORLD_Coronavirus_185952.jpg\" width=\"615\" height=\"409\" caption=\"Electron microscope image from the US National Institutes of Health showing the SARS-CoV-2 virus which causes Covid-19\"></action-text-attachment><br><br>According to figures released yesterday by the Office for National Statistics, there were 24 Covid deaths across North Wales during the week – up from 22 the week before, and 10 the week before that.<br><br></div><div>Of these, 16 Covid deaths were in hospitals, up from 13 the previous week, with eight deaths in care homes, the same as the preceding week.<br><br></div><div>Up to November 13, the pandemic had claimed a total of 664 lives across North Wales.<br><br></div><div>Of those deaths, most (530) took place in hospital, with 107 in care homes.<br><br></div><div>There were also 19 deaths recorded at home, five in hospices, two in other communal establishments, and one elsewhere.<br><br></div><div>Other communal establishments include prisons, halls of residence, hotels, and sheltered accommodation. “Elsewhere” covers deaths outside and people declared dead on arrival at hospital.<br><br></div><div>The figures are based on deaths where <a href=\"https://www.dailypost.co.uk/all-about/coronavirus\"><strong>Covid-19</strong></a> is mentioned on the death certificate.<br><br></div><div>Separate statistics from the Care Inspectorate Wales (CIW) show 12 deaths involving coronavirus among care home residents in North Wales in the week ending November 20.<br><br></div><div>This was up from nine the week before.<br><br></div>",
    "record_type": "Blog",
    "record_id": 5,
    "created_at": "2020-12-07T11:34:27.448Z",
    "updated_at": "2020-12-07T11:34:27.448Z"
},

React component

import React, { Component } from 'react'

import axios from 'axios'

class BlogsContainer extends Component {
  constructor(props) {
    super(props)
    this.state = {
      blogs: []
    }
  }

  getBlogs() {
    axios.get('blogs')
    .then(response => {
      this.setState({blogs: response.data})
    })
    .catch(error => console.log(error))
  }

  componentDidMount() {
    this.getBlogs()
  }



  render() {
return (
  <div>
    <div className="listWrapper">
      <ul className="taskList">
        {this.state.blogs.map((blog) => {

          return(
            <li className="display-blog" blog-source={blog} key={blog.id}>       
              <label className="blog-title">{blog.title}</label>
              <div dangerouslySetInnerHTML={{__html: blog.rich_text_body.body}} />
            </li>
          )       
      })}       
      </ul>
    </div>
 </div>
)
  }
}

export default BlogsContainer

try something with fragment Api like in this [answer](https://stackoverflow.com/a/49777535/14522591) may be it will help you — antoineso, Dec 28 '20 at 08:20
@antoineso I checked out your answer but it states that this solution is only valid if said "html"/jsx is something you have control over. Not for rendering some raw html provided via an API. — Muhammad Daniyal Jamshed, Dec 28 '20 at 08:49
hi this answer may be helping you https://stackoverflow.com/questions/58636001/rails-6-action-text-api — t3__rry, Dec 28 '20 at 09:04

Muhammad Daniyal Jamshed · Answer 1 · 2021-01-30T09:18:33.757

So after hours of searching and scratching my head i just put this function in my model which overrides the json response and viola the images magically start appearing and the full html started rendering.

def as_json(options = {})
  json_to_return = super
  rtb = self.body.to_s
  json_to_return[:rich_text_body] = rtb
  
  return json_to_return
end

Edit: The better approach is clearly to create a serializer and then use that to convert the rich text content.

score 0 · Answer 2 · edited Mar 09 '22 at 02:53

0

Take your Rails model and call to_s on the ActionText::Content of your Post model body:

class Post
 has_rich_text :body
end

Post.first.body.body.to_s

edited Mar 09 '22 at 02:53

John Bachir

22,495
29
154
227

answered Aug 01 '21 at 11:10

Naz

51
4

I am not sure why someone vote this down but this works for me – kevin Oct 16 '22 at 01:24

Action-text-attachment tag not displaying on React front end

2 Answers2