Share: Follow:

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.

const input = this . props . long ? < textarea onChange= { this . props . onChange } className= "make-this-pretty" id= "important-input" name= "important-input" /> : < input onChange= { this . props . onChange } className= "make-this-pretty" id= "important-input" name= "important-input" />;

As you can see there is a lot of duplication here. The only difference is that sometimes we want to use input and sometimes textarea . How can we do it? Quite simply it turns out.

const Tag = this . props . long ? " textarea " : " input " const input = < Tag onChange= { this . props . onChange } className= "make-this-pretty" id= "important-input" />;

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

Share: Follow:

Please enable JavaScript to view the comments powered by Disqus.

Disqus