#HTML Tag depending on Prop

10 messages · Page 1 of 1 (latest)

frank crow
#

Lets say I have an astro component which needs to be wrapped diffrently depending on a prop value - how would I do that? E.g. a list. content (<li> and stuff) always stays the same, but wrapper could be <ul> or <ol>.

potent grotto
#

yeah that's possible

#

for example

# 
{ Astro.props.x === 3 ? <section> : <div> }
frank crow
#

and also for closing tag? 🙂

quiet steppe
#

You can also use a variable as a tag name like <Tag> (it has to be capitalized)

potent grotto
frank crow
#

like: SomeTag='<section>'; if(prop) SomeTag='<div>' ; ...... <SomeTag attributes=""> .... </SomeTag>?

#

although I guess those tag attributes need to be set in variable

quiet steppe
#

You dont need the closing brackets in the variable just the name of the tag like ‘let Tag = “div”’