Search code examples
reactjsgraphqlhtml-parsinggatsby

GatsbyJS HTML React Parser - Parse ACF Wysiwyg field

I am trying to output an ACF Wysiwyg Editor as HTML in my WordPress/Gatsby build. I made a field but when I run gatsby develop the text comes out like:

<p><a href="#">My link</a></p>

I figured I need to use a react-html-parser library.

I've installed the package using npm and imported the html parser with import parse from 'html-react-parser'

Whenever I try to parse my ACF Wysiwyg field it doesn't seem to do anything. Not really sure what I am missing:

        <div class="wrapper">
          <div class="box a">
            parse(`{wpgraphql.pages.edges[0].node.undersideACFgraphql.mainText}`)
          </div>
          <div class="box b">Her skriver jeg tekst 2 :D</div>
        </div>
Solution

  • I found the answer to my own question. I had to set { } around the parse string and it worked perfectly:

    {parse(`${wpgraphql.pages.edges[0].node.undersideACFgraphql.mainText}`)}