CODEWITHSUNDEEP
javascriptjsonreactjs
Kal
Kal

Reputation: 1774

How to convert JSON with inline text styling to html text styling?

I am trying to convert JSON from editorjs to html.

 {
         "type":"paragraph",
         "data":{
            "text":"This is a test of various inline styles - <b>bold</b> <i><b>bold italic </b>and just italic</i>"
         }
      },
      {
         "type":"paragraph",
         "data":{
            "text":"<b>bold</b>"
         }
      },
      {
         "type":"paragraph",
         "data":{
            "text":"<b><i>bold Italic</i></b>"
         }
      },

An example json from editorjs is above.

Right now, I an rendering the paragraph as a whole.

case "paragraph":
  return <Typography variant="subtitle1">{data.text}</Typography>;

If I write a function, should it evaluate character by character?

This is for a react app so looking for javascript solution. Also do not want to use dangerouslySetInnerHTML

Upvotes: 1

Views: 800

Answers (1)

Everest Climber
Everest Climber

Reputation: 1243

https://reactjs.org/docs/dom-elements.html is a good resource for this answer.

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

Upvotes: 1

Related Questions