How to reference standard HTML element types within React?

Question

In React, I can reference any component function, which is really helpful for cases where I want to conditionally use one component type over another. For example:

const Link = ({ text, href, external = false }) => {
  const LinkType = external ? ExternalLink : InternalLink

  return <LinkType href={href}>{text}</LinkType>
}

What I can't figure out is, how can I implement this same type of interface when my child components are simple HTML elements? Is there something like this?

const SomeComponent = external ? React.Component('div') : React.Component('span')

Just use their names as string: `const SomeComponent = external ? 'div' : 'span';` — Emile Bergeron, Apr 20 '21 at 13:09
Thanks Emile, I didn't managed to find that searching on my own. Voted to close as duplicate — bloudermilk, Apr 20 '21 at 13:46
It's buried in the [`React.createElement` documentation](https://reactjs.org/docs/react-api.html#createelement), which is what is really called behind JSX. ;) — Emile Bergeron, Apr 20 '21 at 13:49

score -3 · Answer 1 · answered Apr 20 '21 at 13:07

-3

Just like this:

const SomeComponent = external ? <div>Hey!</div> : <span>Hey!</span>;

answered Apr 20 '21 at 13:07

enbermudas

1,603
4
20
42

2

This won't do the same thing as conditionally using a component *reference*. In other words, it removes the capability of doing ``, which is what the OP is doing. – Brian Thompson Apr 20 '21 at 13:09

How to reference standard HTML element types within React?

1 Answers1