Question 307547 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – formatting a JSON stringified response and render it to React component

When you get a response from open ai after making api call. it will return a json stringified response and when you render it in a React component, it’s not properly formatted.

for example. if the responses contains numbered list, bullet points, or asterisk list. they’re not breaking or creating a newline. Also it doesn’t detects a a new paragraph for example. and if there’s a URL, it’s not clickable, and not shortened. the response is just being rendered as is. by the way, i’m rendering the response in a react chat container and i’m trying to avoid using dangerously inner html.

Any ideas what are the other approach for this to properly format the json response? Or is there like a package that do this?

tried dangerously inner html but this is risky.

Tags:

2

Answers


  1. 0

    We should not use "dangerously inner html" in ReactJS, Check out this link for more info: https://stackoverflow.com/a/60051861/21957513

    I know these two ways to render HTML in ReactJS:

    1. use react-render-html library (Link: https://www.npmjs.com/package/react-render-html)

    Sample code:

    import React from 'react';
import renderHTML from 'react-render-html';

const YourComponent = ({ jsonResponse }) => {
  return (
    <div>
      {renderHTML(jsonResponse)}
    </div>
  );
};

export default YourComponent;
    1. use react-markdown library (Link: https://www.npmjs.com/package/react-markdown#react-markdown)

    Sample code:

    import React from 'react';
import ReactMarkdown from 'react-markdown';

const YourComponent = ({ jsonResponse }) => {
  return (
    <div>
      <ReactMarkdown children={jsonResponse} />
    </div>
  );
};

export default YourComponent;

    Now, I highly recommend opting for the second option, using react-markdown, Because react-markdown builds a virtual DOM, so React only replaces what changed, from a syntax tree. And, most importantly – It have more community support and widely adopted.

    Let me know, if you’ve any questions.

    Login or Signup to reply.
  2. 0

    If your JSON response contains HTML-like elements (e.g., numbered lists, bullet points, URLs), and you want to render them as React elements, you may need to preprocess the JSON data before passing it to react-json-view. You can use a library like react-html-parser to convert HTML strings into React elements:

    npm install react-html-parser

    or

    yarn add react-html-parser

    Then, you can use it in your component:

    import React from 'react';
import ReactHtmlParser from 'react-html-parser';
import ReactJson from 'react-json-view';

const MyComponent = ({ jsonResponse }) => {
  // Convert HTML-like elements in the JSON response to React elements
  const processedResponse = ReactHtmlParser(jsonResponse);

  return (
    <div>
      <ReactJson src={processedResponse} theme="monokai" />
    </div>
  );
};

export default MyComponent;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search