#How to implement booleans as Props

3 messages · Page 1 of 1 (latest)

ebon tusk
#

Hey, I've already posted this in General, But i want to open a support thread for this again, as it is very important to me:

Ahoi Fellow Astronauts!
I have a question:

  • Ive created a component for a classic Text/Image Section that is used very exzessively acrosse the website i am building - see screenshot below
  • I've been able to create props for all the text/image content inside this section
  • Ive included my button component

Now I'm struggling with the button. I would love to be able to toggle the button where I include the section. I would love to pass a prop visibile=true/false or sth when I render the Section component. And when set to false, I would have the button removed.

How would you do this?

unknown.png
vestal patio
#

You could do something like this: ```jsx

const { button=false } = Astro.props

{ button && <button></button> }

#

This example only renders the button if you pass the button prop to your component like: <Component button></Component>