Currently, I am utilizing React.createElement(...) to dynamically produce a basic react website using data from a JSON file.
The JSON file consists of an array of JSON objects that represent elements and their respective children. An individual element's JSON object appears as follows:
{
"id": "e960f0ad-b2c5-4b0b-9ae0-0f6dd19ca27d",
"render": true,
"component": "small",
"styles":[],
"classes":[],
"children": [
"©2017",
{
"id": "04fa3b1a-2fdd-4e55-9492-870d681187a4",
"render": true,
"component": "strong",
"styles":[],
"classes":[],
"children": [
"Awesome Company"
]
},
", All Rights Reserved"
]
}
This particular object is expected to generate the following HTML code:
<small>©2017 <strong>Awesome Company</strong>, All Rights Reserved</small>
To facilitate this, I have developed React components for rendering these HTML elements. For example,
Small.jsx
import React from 'react'
const Small = ({ id, className, style, children }) => {
return (
<small id={id} style={style} className={className}>
{children}
</small>
)
}
export default Small
Additionally, I have created JSX files for other HTML elements such as anchor tags, divs, footers, buttons, etc.
There exists a renderer.js module which is invoked by App.js to render each component specified in the JSON file.
import React from 'react'
import Button from "../components/Button";
import Input from "../components/Input";
import Header from "../components/header/Header";
import Footer from "../components/footer/Footer";
import Div from "../components/containers/Div";
import Article from "../components/containers/article/Article";
import Fragment from "../components/containers/Fragment";
import Anchor from "../components/Anchor";
import Nav from "../components/Nav";
import Heading1 from "../components/typography/Heading1";
import Strong from "../components/typography/Strong";
import Small from "../components/typography/Small";
// Code omitted for brevity
function renderer(config) {
// Code implementation details
}
export default renderer;
Unfortunately, there is an issue where the text content within the <small> and <strong> tags is not being inserted properly, resulting in empty elements when rendered on the site.
The current output looks like this:
<small id="e960f0ad-b2c5-4b0b-9ae0-0f6dd19ca27d" class=""><strong id="04fa3b1a-2fdd-4e55-9492-870d681187a4" class=""></strong></small>
It is evident that the text has not been displayed within the elements as intended.
When only a simple string is provided as the "children" attribute without an array, it displays correctly. This behavior is similar for anchor tags as well.
Referring to the React documentation at https://reactjs.org/docs/react-api.html#createelement, the third parameter of createElement expects an array of children.
Even attempting to wrap the text within an empty fragment did not yield the desired outcome.
In light of this challenge, how can plain text be inserted within the inner HTML of anchor, small, strong tags alongside additional children?