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, React / JSX Dynamic Component Name. — Janez Kuhar
– Janez Kuhar, Commented Jun 3, 2020 at 0:10

Janez Kuhar · Accepted Answer · 2020-06-03 00:05:31Z

2

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(...).

answered Jun 3, 2020 at 0:05

Janez Kuhar

4,3345 gold badges28 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1