Become a React Kung Fu master with us — subscribe to our mailing list!

Dynamic #reactjs tags . Just use uppercase variable name and done :)

  • The only difference is that sometimes we want to use input and sometimes textarea .
  • Meaning that instead of hardcoding whether it is input or textarea or div or span (or anything else) we would like to keep it in a variable .
  • For many React developers using JSX it is not clear how to make a dynamic JSX tag .
  • Lowercase JSX tag names are directly compiled as strings.
  • It is required that your variable starts with uppercase instead of lowercase.

For many React developers using JSX it is not clear how to make a dynamic JSX tag. Meaning that instead of hardcoding whether it is input or textarea or div or span (or anything else) we would like to keep it in a variable. Let’s have a look.

@arkency: Dynamic #reactjs tags . Just use uppercase variable name and done 🙂

(or anything else) we would like to keep it in a variable.

Let’s have a look.

However it is required that your variable starts with uppercase instead of lowercase. Lowercase JSX tag names are directly compiled as strings. You can see the result of JSX compilation on the right column:

That’s it. No magic :).

Become a React Kung Fu master with us — subscribe to our mailing list!