Theo's Typesafe Cult•3y ago

dynamic react components wont render

I'm trying to dynamically render a collection of react components. and I can't just pass the components in an array. so I only pass the name of the components and them I try to convert that name to jsx.

import Component from "./component";

export default function App() {
  const CompName = "Component";

  return (
    <div className="App">
      <CompName />{/*doesn't work*/}
    </div>
  );
}

import Component from "./component";

export default function App() {
  const CompName = "Component";

  return (
    <div className="App">
      <CompName />{/*doesn't work*/}
    </div>
  );
}

just like parsing JSX to output function calls react.createElement(type, args, children). we could get to pass strings and get the function name inside of that cope. ERR:

Warning: The tag <Component> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

8 Replies

asheeshh•3y ago

i really dont understand the code just doing <Component/> eould work

venegoOP•3y ago

oh! wait

asheeshh•3y ago

why are you mapping an array with a string inside

Unknown User•3y ago

Message Not Public

asheeshh•3y ago

eh no i just checked the file

venegoOP•3y ago

yes

Unknown User•3y ago

Message Not Public

asheeshh•3y ago

i see

Gaming

Programming

dynamic react components wont render