Summary: Exploring the frontend world for the first time. Attempting to integrate custom components within p-tags for a website, but facing challenges in making them dynamically changeable based on user interaction.
Greetings all! As a newbie in front-end development, I come seeking assistance with my introductory query, overlooking any inaccuracies in terminology or question structure!
My current project involves working with React, where I've crafted custom components to embed on my webpage within p-tags.
For instance, when I create a custom component like and insert it as follows:
function test{
return(
<p>Hello! This is a <ShowDefinition word="website"/> built using React! </p>
)}
However, I aspire to have multiple contents that dynamically update through an incremental index. Therefore, I store my content in a separate jsx file as a dictionary.
Upon attempting something similar to this:
function test{
return(
<div>{script[index].content}</div>
)};
where
script[index].content = '<p>Hello! This is a <ShowDefinition word="website"/> built using React! </p>';
The outcome displayed merely as a string literal on the page. I experimented by enclosing my string in {}, but to no avail.
I also tried implementing dangerouslySetInnerHTML along with DOMPurify to sanitize the HTML code:
dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(script[index].content)}};
This approach worked; however, it omitted all my custom components, rendering the example sentence as "Hello! This is a built using React!"
Realizing that dangerouslySetInnerHTML cannot parse custom components and solely accepts HTML, I'm now uncertain about the next course of action.
One idea I considered was storing the content in an MD file and parsing it, but my limited understanding of MD files/MD parsers leaves me skeptical of its effectiveness in resolving my issue.
Your valuable guidance would be immensely appreciated.
Thank you sincerely.