Add conditional (if/then/else) HTML example to JSX expressions

[drewtownchi]

Coming from a Vue world we often use v-if and v-else when deciding what to show/not show in HTML templates. As I'm not super familiar with JSX expressions I was looking into the docs to see how I could do something similar with Astro.

I believe having some examples like the following in the documents would be helpful for those of us not familiar with JSX. It feels like it could work well under https://docs.astro.build/en/core-concepts/astro-components/#dynamic-html as an additional example.

Longhand

---
const items = Astro.glob('./pages/events/*.md')
---
{() => {
  if(items.length > 0) (
    return <p>...</p>
  }
}}

Shorthand

---
const items = Astro.glob('./pages/events/*.md')
---
{items.length > 0 && (
  <p>...</p>
)}

[swift502]

Funny I was looking for the same thing yesterday and couldn't find it.

I think "for" (not "foreach") and "while" constructs could also be helpful. I was looking for them yesterday but still don't know if there's a standardized way to do "for" and "while" in Astro/JSX.

[sarah11918]

Thanks for this feedback @drewtownchi, and I guess great minds think alike, @swift502!

I cover examples of this in the walk-through Tutorial we are getting ready to publish, but you're right, we don't have them in the main docs page, and I think you've absolutely identified where they would go. The shorthand syntax is considered "more Astro" for what it's worth, and that's what we would probably choose to document. Would you like to make a PR to the docs showing an example of that? Maybe with a sentence before it of the style: "Elements can also be rendered conditionally using JavaScript logical and conditional operators:" ?? How useful do you think a __ ? ___ : ___ example would be there, too?

I can tell you that one strategy we took with this v1 version of the docs was to focus on demonstrating Astro's connection between the script frontmatter and the HTML templating, and explicitly "not to teach JS/JSX"... which is for the most part the patterns that will work for things like this in your Astro file. That's in part why we also make a point of comparing Astro syntax to JSX in a few places, and to highlight the differences from it. If you're ever left wondering, looking to see how it's done in JSX will usually you get most, if not all of the way there.

As we now are looking to organize and structure our content differently, we will be making room for some of these more explicit examples in different types of content guides. And as I mentioned, I do cover this exact pattern in the Astro tutorial, which assumes little-to-no JSX (or Svelte, or even JS!) experience.

[drewtownchi]

I can do a PR for this. I'll play around with an example and see if the __ ? ___ : __ example is materially different enough to warrant a separate example.

If the goal is not to teach JS/JSX then maybe it would be useful to link to a JSX primer? The ones I've seen seem more React specific and don't really cover things like the Shorthand example though. Any thoughts on this?