Question 43071 in Html Question posted in
Some basic documentation can be found here.

ReactJS – Parse HTML tags within a String inside div and display in UI

I have a div in the render() function like below where output is a custom object

{output.text.split("-").map(res => 
   <div>{res}</div>                                     
)}

Now the res string may or may not have HTML elements. If it has html elements, it should be displayed accordingly in UI

For ex: if value of res is Please click the link <a href="url">here</a>, it should be displayed in the UI as below,

Please click the link here

Tags:

2

Answers


  1. 0

    You can try using the DOMParser like this:

    {output.text.split("-").map(res => 
   <div>{new DOMParser().parseFromString(res, "text/xml")}</div>
)}

    For any more quires kindly do let me know.
    Thank you.

    Login or Signup to reply.
  2. 0

    You can use html-react-parser library to meet you requirements.

    import "./styles.css";
import  parse  from "html-react-parser";
import React from "react";
export default function App() {
  const [output, setOutput] = React.useState({
    text: "test-Please click <a href='https://google.com'>here</a>"
  });

  return (
    <div className="App">
      {output.text.split("-").map((res) => {
        return <div>{parse(res)}</div>;
      })}
    </div>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search