How to dynamically choose which element to render in ReactJS

Question

I am writing a webpage which dynamically renders elements from a database, with each one having its own state. To choose what element is rendered, I used a switch-case like this:

switch (this.state.type) {
  case 'textarea':
    element = <textarea {...this.state} />
    break

  ...

  default:
    element = <input {...this.state} />
}

What I would like to do is have a nice way of choosing which element is rendered, like this:

switch (this.state.type) {
  case 'textarea':
    tag = 'textarea'
    break

  ...

  default:
    tag = 'input'
}

element = <{tag} {...this.state} />

Is there a way to something similar to this in React?

kidney · Accepted Answer · 2019-04-08 15:14:19Z

3

You can use React.createElement [1], whose first argument is the element to render.

[1] https://reactjs.org/docs/react-api.html#createelement

answered Apr 8, 2019 at 15:14

kidney

3,14521 silver badges26 bronze badges

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

1 Comment

Ruan Mendes Over a year ago

While this is true, I'd recommend against it. The doc you linked to says You will not typically invoke React.createElement() directly if you are using JSX So make sure you really need it before going crazy with it

nanobar · Accepted Answer · 2019-04-08 15:26:04Z

1

You can already do that, the variable should start with an uppercase:

function getElementTag(type) {
  switch (type) {
    case 'textarea':
      return 'textarea'
    default:
      return 'input'
  }
}

function App() {
  const TagName = getElementTag('textarea');
  return (
    <div className="App">
      <TagName value="you can already do it" />
    </div>
  );
}

answered Apr 8, 2019 at 15:26

nanobar

66.8k26 gold badges155 silver badges178 bronze badges

2 Comments

Yuval Meshorer Over a year ago

That is very cool. Thank you! But, why should the variable start with an uppercase? Is it just convention-wise?

nanobar Over a year ago

It is a JSX convention so that it can differentiate between native HTML elements (lowercase) and React Components (capitalize) otherwise it will try and render a html tag called tagName straight into the browser.

Collectives™ on Stack Overflow

How to dynamically choose which element to render in ReactJS

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related