ReactJS: programmatically change component tag with JSX

Question

I am making a conditional component that returns <a> if href is defined and returns <div> if not. I am doing this way:

const Label = ({children, ...other}) => {
    let component;
    if (other.href)
        component =
            <a {...other}>
                { children }
            </a>
    else
        component =
            <div {...other}>
                { children }
            </div>

    return component;
}

export default Label

There is any way to make this component by only changing the tag name? I know that if I use the manual way of creating compontents (React.createElement) I can do this by changing the first argument passed, for it's a string. But with JSX it's a little different. I though something like

let component =
    <{tag} {...other}>
        { children }
    </{tag}>

Is it possible?

oobgam · Accepted Answer · 2015-12-25 15:27:32Z

3

something like this?

const Label = ({children, ...other}) => {
  let component;

  if (other.href) {
    component = <a {...other}>{ children }</a>;
  } else if (other.tag) {
    const Tag = other.tag;
    component = <Tag {...other}>{ children }</Tag>;
  } else {
    component = <div {...other}>{ children }</div>;
  }
  return component;
}

ReactDOM.render(
    <Label href="#">Hello World</Label>,
  document.getElementById('root')
 );

 ReactDOM.render(
    <Label>Not a Link</Label>,
  document.getElementById('rootTwo')
 );


 ReactDOM.render(
    <Label tag="p">Paragraph</Label>,
  document.getElementById('rootThree')
 );

Working demo:, https://jsfiddle.net/tgm4htac/

answered Dec 25, 2015 at 15:27

oobgam

1,3098 silver badges10 bronze badges

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

2 Comments

oobgam Over a year ago

You can try the Babel repl const Tag = 'p'; <Tag >Hello</Tag>; transpiles to this var Tag = 'p'; React.createElement( Tag, null, 'Hello' ); I think you just need the jsx tag as a variable, not sure if it needs to be capitalized

Mateus Felipe Over a year ago

It's valuable to note that Tag must be capitalized, because React interpeter lowercased as html tags.

Oleksandr T. · Accepted Answer · 2019-09-11 08:33:11Z

3

If you pass to <> values like component.tag and JSX transpiler can create dynamic tags.

const Label = ({children, tag, ...other}) => {
  const component = { tag: tag };

  return (<component.tag {...other}>
    { children }
  </component.tag>);
};

Example

or

const Label = ({children, tag, ...other}) => {
  const Component = tag;

  return (<Component {...other}>
    { children }
  </Component>);
};

Example

edited Sep 11, 2019 at 8:33

answered Dec 25, 2015 at 15:31

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

1 Comment

David Over a year ago

This is the correct answer. Specifically the second example in my case.

Collectives™ on Stack Overflow

ReactJS: programmatically change component tag with JSX

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related