Conditional JSX in Astro — Roma’s Unpolished Posts

Roman Komarov on how they use an IIFE (Immediately Invoked Function Expression) to handle complex conditional rendering in .astro components.

---
const { linkText, isDiv = false } = Astro.props;
---

{
	(() => {
		const someContent = <a href="#hello">{linkText}</a>;
		return (
			<div class="wrapper">
				{isDiv ? (
					<div class="inner">{someContent}</div>
				) : (
					<span class="inner">{someContent}</span>
				)}
			</div>
		);
	})()
}