javascripthtmljsonnext.js

Putting HTML as part of string in JSON?

Wondering if there's any way of doing this? I think I could do it if I use dangerouslySetInnerHTML but ideally I'd just call this within my p tag.

This is my Json

  "login": [
    {
      "title": "Hello!",
      "blurb": "This is a secret direct link to enable login without a username and password. If you're having trouble accessing my portfolio via this link, please <a href=\"mailto: email@email.com\" className={`${styles.link}`}>contact me.</a>"
    }
  ]

And then in my js file (nextJS) I'd just do this

<p className={`${styles.body} fadeIn`}>{cms.blurb}</p>

Any way of doing this? Something I can change in my json file? Trying the above results in the HTML just being appended to the string. DangerouslySetInnerHTML works, but I believe we should try avoid that?

Solution

  • You can use html-react-parser for this. Simply install the package and import it in your component as:

    import parse from 'html-react-parser';

    and then in your html use it as:

    <p className={`${styles.body} fadeIn`}>{parse(cms.blurb)}</p>