Как использовать теги html/css в данных JSON для заполнения компонента React ⇐ CSS

[Anonymous]

У меня есть файл рецептов в формате JSON, и я создаю приложение React, используя специальную библиотеку флипбука. Тонкости этой библиотеки не особо важны, но я создаю ее компоненты страницы динамически из файла JSON.
По сути, я хочу, чтобы мой файл JSON мог содержать HTML и CSS. данные, такие как , и фактически отображаются в динамически генерируемых компонентах страницы. Возможно ли это?
Страница реакции:
export default function RecipeBook() {
const searchParams = useSearchParams();
const book = useRef();
const [pages, setPages] = useState([]);

useEffect(() => {
const recipeElems = Object.entries(recipes).map((element, i) => (
// checks if page should be cover and/or if the page has a link to reference
element[1].cover ?
{element[1].header}
:
element[1].link !== "" ?

{element[1].content} Inspired by this .link}]recipe.

:

{element[1].content}

));
setPages(recipeElems);
}, [])

return (


{pages}


);
}

JSON выглядит следующим образом:
[
{
"header": "Desserts",
"src": "",
"cover": true
},
{
"header": "Fl-Earl Gray Cake",
"content": "Earl gray and marzipan-chunks sponge cake (1:1:1 b:s:f ratio, 3 eggs) soaked with çiçek suyu and rose syrup. \n Rose cream cheese frosting. \n Rose marmalade to decorate.",
"link": "https://theclovecoterie.substack.com/p/nosferatu-cake",
"src": "/kitchen/cake.jpg",
"cover": false
},
...
]


Подробнее здесь: https://stackoverflow.com/questions/793 ... -component