To enable interactivity on a web page, metadata is stored in a database. This metadata is used to retrieve or fetch data and build the feature-based components. Once the components have been built, the page key is passed to render the component using React. Regardless of the pageKey, the repetitive HTML is always rendered, while the remaining UI is dynamically loaded depending on the pageKey. React is a JavaScript library that simplifies the process of building user interfaces. It allows for efficient updates to be made to the web page without requiring a complete refresh. By rendering the component in React, users can experience seamless and interactive web pages, improving the overall user experience.

Dynamic components are very useful when dealing with changing data or when the UI needs to react to diverse conditions. They offer reusability, maintainability, and scalability by allowing dynamic components to be built, configured, and displayed.

In the context of web development, dynamic components are components that are displayed or constructed dynamically based on particular criteria or data. Dynamic components, as opposed to hard-coding individual components, allow for adaptive rendering based on runtime information. Composing or nesting components based on specific data or logic can be used to build dynamic components. You can send data or props to child components to dynamically alter their behaviour or appearance. This enables you to construct reusable components that can be set differently based on the circumstance.

Parameters: There are only 3 main parameters namely

1. tag

2. children

3. content

sample comparison: html:

<div>
<h2>text</h2>
</div>

json:

{
“tag”:”div”,
“children”:[
{“tag”:”h2”,”content”:”hello”}
]
}

tag: Represents the HTML tag name for the component. In this case, the top-level tag is a div, and the child tag is an h2. children: Represents an array of child elements or elements. In this case, the div tag has one child, which is the element h2. content: Represents the text content of the component. In this example, the h2 has the text "hello" as its content.

The code provided clearly demonstrates the fundamental nature of our JSON file format. However, the primary purpose of our DynamicComponent is not to duplicate the code, even with a small inclusion or exclusion. pageKey is used to distinguish this and reduce the problem.

(Figure i)

<div className=”styles”>
<h2>name<h2>
<p>description</p>
<img src=”asset-image” />
<div>
(Figure ii)
<div className=”styles”>
<h2>name<h2>
<p>description</p>
<iframe src=”asset-video” ></iframe>
<div>

In the above mentioned two different examples all the style property, content are similar to 90 percent. The only difference is that (Figure i) has image (Figure ii) has video. For the minor inclusion of a video and exclusion of the image the same code was repeated again. To resolve this code duplication let’s mimic the code into our DynamicComponent (Figure iii)

{
"tag": "div",
"props": {
"className": "styles"
},
"children": [
{
"tag": "h2",
"content": "name"
},
{
"tag": "p",
"content": "description"
},
{
"tag": "img",
"props": {
"src": "asset-image"
},
"pageKey": "page1"
},
{
"tag": "iframe",
"props": {
"src": "asset-video"
},
"pageKey": "page2"
}
]
} 

tag: Represents the HTML tag name for the component. In this case, the top-level element is a div. props: Represents the properties or attributes of the elements. In this example, the div has a single props, className, which has the value "styles"(can be specified in css) children: Represents an array of child components or elements. In this case, div has several child elements, including an h2 tag, a p tag, an img tag, and an iframe tag. content: Represents the text content of the component. In this example, h2 has the text "name", and the element p has the text "description". props: Represents the properties or attributes . For example, the img tag has a src prop with the value "asset-image", and the iframe tag has a src prop with the value "asset-video". pageKey: Represents a specific key or identifier associated with each child . In this example, the element img has a pageKey of "page1", and the element iframe has a pageKey of "page2".

As developers might use these codes (figures i and ii) in different pages in our website, so by assigning it to a pageKey(as done in figure iii) , and passing a specific pageKey to our DynamicComponent, it renders the objects which have the pageKey specified and ignores the remaining. To denote which page should be rendered and others to be ignored, the developer has to pass the specific pageKey to be rendered into our DynamicComponent. So in the above mentioned example (figure iii) the objects are assigned to a pageKey. So the objects without the pageKey are common to both (figure i and ii) , no change in the code , so they are rendered and the objects with the pageKey get rendered only if it matches with the pageKey passed into our DynamicComponent. function : It is used to handle gestures. If the component has to perform any task after any gestures then the function has to be specified clearly

(Figure iv):

{
"tag":"div", 
children:[ 
{ 
"tag":"button",
"content":"Press me", 
"onClick":"alert" } 
] 
} 

Here the name of the function is "alert".The parameter function consists of all the functions that are going to be used by the user who specifies the name of the function in the JSON to the "onClick" key as a value. Working of DynamicComponent : This DynamicComponent can be called and used anywhere in the web application by passing the required parameters specified. Once the required JSON(Config) is passed as a parameter Dynamic Component uses this JSON and it maps each object of config and passes those object into a renderer named as renderComponent wrapping it with React.Fragment tag to ensure multiple elements together without adding an extra DOM element renderComponent: Parameters: Component is the parameter which is basically a JSON object that is passed . Firstly, the object named as component is destructured as tag,content,props,children,value,onChange,onClick,pageKey (pageKey will be assigned to a new variable named as componentPageKey) and then ComponentTag is assigned to the tag. Initially the code checks if there is a componentPageKey and then it compares the componentPageKey and the pageKey that is passed directly to the DynamicComponent , if it does not match then it returns null. As html tags can be differentiated as self-closing and paired-tags . so conditional rendering is used to differentiate self-closing and paired-tags The function first checks if ComponentTag is equal to self-closing tags like "input", "img", or "hr" etc…If it matches any of these tags, it returns the corresponding self-closing tags with additional props and the value, onChange, and onClick are common. The “function” is used to retrieve the appropriate value for the onClick pro . If none of the above conditions are met, it assumes ComponentTag represents a paired tag and returns an object with the provided props, onClick handler, and any children components. The “function” is used to retrieve the appropriate value for the onClick prop. The children prop is rendered using the map function recursively, calling the renderComponent function to handle each child component