Dynamic Component Rendering in React

This challenge focuses on implementing a core aspect of dynamic web applications: rendering components at runtime based on configuration. You'll build a system that allows a parent component to dynamically render child components based on a provided list of component types and their associated data. This is crucial for building flexible UIs, dashboards, and content management systems where the structure of the page isn't entirely predefined.

Problem Description

Your task is to create a DynamicRenderer React component in TypeScript. This component will accept an array of configuration objects. Each object will specify which component to render and the data to pass to it. The DynamicRenderer should then iterate through this configuration array and render the corresponding components dynamically.

Key Requirements:

1. Component Mapping: You need a mechanism to map string identifiers (e.g., "TextComponent", "ImageComponent") to actual React component functions or classes.
2. Dynamic Rendering: The DynamicRenderer component should accept an array of configuration objects. Each object will have a type property (the identifier for the component) and a props property (an object containing the data to pass to the rendered component).
3. Error Handling: If a component type specified in the configuration is not found in your mapping, the DynamicRenderer should render a fallback "Component Not Found" message.
4. Type Safety: Utilize TypeScript to ensure type safety for the configuration objects and component props.

Expected Behavior:

The DynamicRenderer component, when provided with a valid configuration array, should render the specified components with their respective props. For example, if the configuration includes [{ type: "TextComponent", props: { content: "Hello" } }], it should render a TextComponent with a content prop of "Hello".

Edge Cases to Consider:

• An empty configuration array.
• A configuration array containing invalid component types.
• Components that might have complex nested structures or require specific event handlers (though for this challenge, passing simple props is sufficient).

Examples

Example 1:

// Assume these components are defined elsewhere:
// const TextComponent: React.FC<{ content: string }> = ({ content }) => <div>{content}</div>;
// const ImageComponent: React.FC<{ src: string; alt: string }> = ({ src, alt }) => <img src={src} alt={alt} />;

const configuration = [
  { type: "TextComponent", props: { content: "Welcome to the dynamic renderer!" } },
  { type: "ImageComponent", props: { src: "logo.png", alt: "Company Logo" } },
];

// Expected Output (Conceptual):
// <div>
//   <div>Welcome to the dynamic renderer!</div>
//   <img src="logo.png" alt="Company Logo" />
// </div>

Example 2:

const configuration = [
  { type: "UnknownComponent", props: { message: "This won't be rendered" } },
  { type: "TextComponent", props: { content: "This one will." } },
];

// Assume TextComponent is mapped, but UnknownComponent is not.

// Expected Output (Conceptual):
// <div>
//   <div style={{ color: 'red' }}>Component "UnknownComponent" not found.</div> {/* Or similar fallback */}
//   <div>This one will.</div>
// </div>

Example 3:

const configuration: Array<{ type: string; props: Record<string, any> }> = [];

// Expected Output (Conceptual):
// <div>
//   {/* Renders nothing as the configuration is empty */}
// </div>

Constraints

• The DynamicRenderer component must be implemented as a functional component using React hooks if necessary.
• All component mappings and configurations should be strongly typed using TypeScript.
• The maximum number of configuration objects in an array will not exceed 100.
• Component names (string identifiers) will be alphanumeric and not exceed 50 characters.
• The rendering process should be efficient, avoiding unnecessary re-renders.

Notes

Consider how you will manage the mapping between the string type and the actual React component. A simple object or Map is a good starting point. Think about how to pass the props object dynamically to the rendered component. For the "Component Not Found" fallback, a simple div with some styling to indicate an error would suffice. You will need to define placeholder TextComponent and ImageComponent for testing purposes.