I’m following this guide, and getting the data to show up no worries. What I’m struggling with however, is if I want some HTML in my json file, for example, if I want to add a class to part of a string. Is the only way to do this using dangerouslySetInnerHTML?
Hi, Shane! Welcome to the Vercel Community
You could structure your JSON data with explicit fields, like so:
{
"text": "Hello World",
"className": "text-blue-500"
}
Then create React components that accept the structured data as props, render the content with appropriate HTML elements and apply classes or styles as needed.
Then when it comes to parsing and rendering the content, it’d look like:
// Read JSON normally
const data = await readJsonFile()
// Render through your component
<StyledText content={data} />
This would make sure that:
Type-safe and secure
No raw HTML injection
Full React component control
Easy to maintain and extend
This is safer than using dangerouslySetInnerHTML while still achieving styled, structured content from your JSON files.
Thanks Pauline! Turned out the problem was with what I was putting in my JSON file so got this working now. Thanks though!
Great to hear this works now! Thanks for coming back to share your solution
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.