render dynamic html element based on props in react

Question

I have a component that receives bunch of values as props, amongst them is a prop with a string value that defines the type of 'output html to return'.

something like this, which is of course wrong

const WithScrollingText = ({text,boxWidth,tag}) => {
    return boxWidth > 100
    ?   <tag>{text}</tag>
    :   <div className="with-scrolling-text"><div>{text}</div></div>
}

and I would call/use this component like this:

<WithScrollingText text="Something" boxWidth={250} tag="span"/>
<WithScrollingText text="Something else" boxWidth={250} tag="div"/>

and so on

How can I fix the rendering so that when I send 'span' to the component, it renders and returns an span

coreyward · Accepted Answer · 2020-04-22 14:23:29Z

5

JSX is just syntactic sugar. Babel transforms <div>Hello</div> into React.createElement("div", {}, "Hello").

So in order to have a dynamic tag name, you can use this syntax directly:

const WithScrollingText = ({text, boxWidth, tag}) => {
    return boxWidth > 100
    ? React.createElement(tag, {}, text)
    : <div className="with-scrolling-text"><div>{text}</div></div>
}

Another approach, should you want to stick with a JSX-style tag, is simply to assign the value of tag to a variable with a capital first letter—this tells React to evaluate it as a variable instead of treating it as a string (like it would for React elements, like div).

const WithScrollingText = ({text, boxWidth, tag}) => {
  const Tag = tag
  return boxWidth > 100
    ? <Tag>{text}</Tag>
    : <div className="with-scrolling-text"><div>{text}</div></div>
}

answered Apr 22, 2020 at 14:23

coreyward

80.5k21 gold badges148 silver badges176 bronze badges

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

Collectives™ on Stack Overflow

render dynamic html element based on props in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related