Value of ActionText body is always " "(empty string)

Question

I am using Rails 6 API and React. I'm trying to build a Rich Text Editor with ActionText. When I send the RTE content from the Trix editor on the front end, it just doesn't set the ActionText body to the body I sent through with Axios.

I am sure that the body has come correctly to the controller because I used byebug and printed out the param value.

For example, it looked like this: <div>test</div>

But whenever I try to view what it actually is by running announcement.details.to_s it returns " " for some reason.

I set the details field like this: has_rich_text :details in the Announcement model.

My controller which handles this looks like this:

module V1
  class AnnouncementsController < ApplicationController
    def create
      announcement = Announcement.new(announcement_params)
      announcement.author = @current_user

      authorize announcement

      if announcement.valid? && announcement.save
        render json: { message: "Announcement successfully created! You can view it here." }, status: 201
      else
        render json: { messages: announcement.errors.full_messages }, status: 400
      end
    end

    private

    def announcement_params
      params.require(:announcement).permit(:title, :details)
    end
  end
end

If it helps in any way, this is the React code:

const RTE = (props) => {

    let trixInput = React.createRef()

    useEffect(() => {
        trixInput.current.addEventListener("trix-change", event => {
            console.log("fired")
            props.onChange(event.target.innerHTML)
        })
    }, [])

    return (
        <div>
            <input
                type="hidden"
                id="trix"
                value={props.value}
            />
            <trix-editor 
                input="trix"
                data-direct-upload-url={`${bURL}/rails/active_storage/direct_uploads`}
                data-blob-url-template={`${bURL}/rails/active_storage/blobs/:signed_id/*filename`}        
                ref={trixInput}
                className="trix-content"        
            ></trix-editor>            
        </div>
    );
}

And then I just normally pass it with Axios:

        axios.post(`${bURL}/v1/announcements/create`, {
            "announcement": {
                "title": title,
                "details": value
            }
        }, {
            headers: {
                'Authorization': `token goes here`
            }
        }).then(res => {
            // success
        }).catch(err => {
            // error
        })

If you need any more code snippets or information please comment.

Value of ActionText body is always " "(empty string)

0 Answers0