React · Theory

String to Component in React

Theory

78/94

String to Component in React

Map a string to a component: const MAP = { hello: Hello, bye: Bye }; const Comp = MAP[kind] || Fallback; return <Comp />. Don’t eval(). Don’t dangerouslySetInnerHTML untrusted HTML. That’s how widget builders stay safe.

String to Component in React — kind=bye → Bye. A dictionary of components is the safe pattern.

Diagram

Parent
    │ props (read-only)
    ▼
  Child → UI

Exam tip

String → component map. Never eval.

Example

// String to component
const MAP = {
  hello: function Hello() { return <p>Hi</p>; },
  bye: function Bye() { return <p>Bye</p>; },
};

export default function Switch({ kind }) {
  const Comp = MAP[kind] || MAP.hello;
  return <Comp />;
}

String to Component in React — kind=bye → Bye. A dictionary of components is the safe pattern.

Short notes

DefLookup dictionary.
RuleFallback component.
RememberNo eval / random HTML dump.

// String to component const MAP = { hello: function Hello() { return <p>Hi</p>; }, bye: function Bye() { return <p>Bye</p>; }, }; export default function Switch({ kind }) { const Comp = MAP[kind] || MAP.hello; return <Comp />; }

String to Component in React

Example

Short notes

Questions

String to Component in React

Example

Short notes

Questions