How to set JSX content in a string (React)

Question

I'm trying to use props in my article. I set a "content" prop allowing me to enter the content, then it displays it in a span tag. My only issues are that I cannot do line breaks because it breaks the string, and it uses pure text. I want to bold and highlight particular words but it won't let me do it, it displays the actual tag. How can I fix it?

Later on, I plan to display code on the website as a guide. I can't display C++ without line breaks and indents.
https://code.sololearn.com/WbpUA7q6oJpe/?ref=app

Answer 1

Another way is set intro constant as jsx variable.

You can change intro assignment to

const intro = <div>Today I am going to teach you basic object oriented programming in C++. This website was made with <b>React.js</b>, I hope you enjoy</div>

Notice that without double quote ", this is a jsx code, not a string.

Try these 2 ways, tell us which one is workable for you.

Answer 2

You can use this small library:
https://www.npmjs.com/package/react-html-parser

I have an old code using it as well
https://code.sololearn.com/WN1rWCh7iDxC/?ref=app

Answer 3

Thanks Calviղ , I'm so glad React wizards like you and Bury exist here. You're a huge help.

Answer 4

Split the string and set props in array string, set html tag and its string directly to array element with enclosed with double quote ("), jsx would treat it as html content.

Try to set
const intro = ["Today I am going to teach you basic object oriented programming in C++. This website was made with ", <b>React.js</b> ,", I hope you enjoy"]

Answer 5

Calviղ The code part is falling apart lol. Right of the bat I need to use "class" and "public" for the example. I'm starting to think React wasn't made for small websites lmao