React element name as a string variable

Question

While skimming through source code of one of the React UI libraries, I've come across this code pattern (I simplify):

function Test() {
  let Button = "button";
  // ...
  return <Button>Click me</Button>;
}

What's going on here - why does this work?:)

Similar, however, not quite the same nor as clear questions: [Dynamic tag name in jsx and React](https://stackoverflow.com/questions/33471880/dynamic-tag-name-in-jsx-and-react), [React / JSX Dynamic Component Name](https://stackoverflow.com/questions/29875869/react-jsx-dynamic-component-name). — Janez Kuhar, Jun 03 '20 at 00:10

score 2 · Accepted Answer · answered Jun 03 '20 at 00:05

The JSX above is interpreted by React as:

function Test() {
  let Button = "button";
  return React.createElement(
    Button,
    null,
    "Click me"
  );
}

Button is just a string variable, set to "button", that gets passed to React.createElement(...).

1 Answers1