Dynamically choosing tag in React

Question

I have some React components that use SVG, and can be contained within an SVG or not. Consequently, I'd like to have a simple way of letting them render inside svg or g, depending on a param, something like:

export default class SVGComponent extends React.Component{
  get containerElement() {
    return this.props.inSVG ? 'g' : 'svg';
  }
  render() {
    return(<{containerElement}>
      <text>Extendable component</text>
    </{containerElement}>);
  }
}

This doesn't work: you can't use template injection in JSX this way. Is there another way I could approach it? It seems like I might be able to do React.DOM[containerElement], but I gather React does not like mixing React.DOM and JSX, and I don't want to move entirely over to React.DOM syntax just for this one function.

React.createElement(this.containerElement(), {}, asdasd); something like this could work. It mixes up the concepts of JSX and JS though — Max Bumaye, Sep 02 '15 at 12:03

score 3 · Answer 1 · edited May 23 '17 at 12:02

3

Take a look at this answer Dynamic tag name in jsx and React

It seems you can create a variable with the first letter capitalized and use it like a component like this

const CustomTag = `h${this.props.priority}`;
<CustomTag>Hello</CustomTag>

If this.props.priority == 3 this will render <h3>Hello</h3>

edited May 23 '17 at 12:02

Community

1
1

answered Apr 05 '17 at 11:33

Thanasis Ioannidis

2,981
1
30
50

score 1 · Answer 2 · answered Sep 02 '15 at 12:09

1

You can do it like this

render(){
   var content = <text>Extendable component</text>;
   if(this.props.inSVG){
       return (
           <g>{content}</g>
       );
   }
   else {
       return (
           <svg>{content}</svgg>
       );
   }
}

answered Sep 02 '15 at 12:09

Anton M.

472
4
14

1

This is not dynamic. It is choosing a statically defined tag at compile time. – Thanasis Ioannidis Apr 05 '17 at 11:28

score 0 · Answer 3 · answered Sep 02 '15 at 14:04

I would probably do something like this:

export default class SVGComponent extends React.Component{
  get containerElement() {
    var content = (<text>Extendable component</text>);
    return this.props.inSVG ? (<g>{content}</g>) : (<svg>{content}</svg>);
  }
  render() {
    return({containerElement()});
  }
}

But, it really depends on how dynamic the <text> is.

If the child elements are very dynamic, you might want to render this.props.children and add then as children of the component.

Dynamically choosing tag in React

3 Answers3