4

I am facing a problem to replace the answer from api and format it properly

answerFromAPI = "textword textword textword textword textword.\n\nFeel free to ask me questions from this site:\nhttps://google.com  \n"

I want to format and render it as following:

textword textword textword textword textword.


Feel free to ask me questions from this site:

https://google.com     /*this should be clickable link*/

For that I have created two functions. 1st for textlinks

 let textLink = answerFromAPI.replace(/(((https?\:\/\/)|(www\.))(\S+))/gi,
           function (x) {
             console.log(x)
            return '<a href="' + x + '" target="_blank">' + x + '</a>';
         })

2nd for new line

let newLine = answerFromAPI.replace(/(\n?\\n)/ig, function(n) {
            console.log(n)
            return '<br />'
          })

and I am trying to push into array after applying those to functions lets take testlinks for example

array= []
array.push(textLink)

after that I am rendering the array in jsx

render() {
let temp = []

this.array.map((a,index)=>{
temp.push(<p>{a}</p>)}
)}

and returning as following

return <div>
{temp}
</div>

How can I render my message properly on front end. I tried in multiple way but I am facing one issue like the response from function is passing as a string not as HTML tag.

How can I do that?

Siddharth Thakor
  • 156
  • 3
  • 17

1 Answers1

1

You need to set the innerHTML property on an element to have it render HTML and not a string.

return <div innerHTML={temp} />;

See https://stenciljs.com/docs/templating-jsx#complex-template-content for more details.

matthewsteele
  • 1,797
  • 1
  • 15
  • 31
  • My problem is solved so I cannot implement your idea because I have to do so many changes to my existing code. May be you are correct with this solution. Anyway thank you so much man – Siddharth Thakor Feb 13 '19 at 16:44