Yesterday I was trying to use "if" in a html inside of curly braces, but it didn't allow me. So had to do some hacky stuff, took the item in an array and used, filter + map combination to get what I want. I'm sure I've done something wrong, there probably is a better way. Do you know how can I do it?
#Can't use "if" in html
vital anvil
faint sinew
https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator works the same in Astro
vital anvil
It doesn't allow me to do declarations or etc.
flat patio
You can wrap your statements in a function
<body>
{
()=>{
if (fancy){
return <h1>Fancy</h1>
} else {
return <h1>Bad</h1>
}
}
}
</body>
Wow, that's great
drifting scroll
```jsx
<body>
{
()=>{
if (fancy){
return <h1>Fancy</h1>
} ...
Isn't this just the conditional render from above with extra steps, any benefits on this?
flat patio
I switch to this when I start using a lot of ternaries, this is more readable for me
vital anvil
My take on this was, inside the if brackets, I can do declarations like const { Content } = await page.render()
{
async () => {
if (toRender !== undefined) {
const { Content } = await toRender.render();
return <Content />;
}
}
}
This worked like a charm
Thanks guys
vital anvil
{
async () => {
if (toRender !== undefined) {
const { data } = toRender;
() => {
if (isIndex) {
return <h1>{ data.title }</h1>;
}
return <h1>{ data.title }<span class="primary"> posts</span></h1>;
}
const { Content } = await toRender.render();
return <Content />;
}
}
}
This one doesn't show h1 tags
{
async () => {
if (toRender !== undefined) {
const { data } = toRender;
isIndex ? <h1>{ data.title }</h1> : <h1>{ data.title }<span class="primary"> posts</span></h1>
const { Content } = await toRender.render();
return <Content />;
}
}
}
This doesn't either
{
async () => {
if (toRender !== undefined) {
const { data } = toRender;
{ isIndex ? <h1>{ data.title }</h1> : <h1>{ data.title }<span class="primary"> posts</span></h1> }
const { Content } = await toRender.render();
return <Content />;
}
}
}
Or this
Sorry if I'm spamming, just trying to give as much details I can
flat patio
Sorry if I'm spamming, just trying to give as much details I can
Not at all, you created the thread!
flat patio
```ts
{
async () => {
if (toRender !== undefined) {
con...
This is not supported, you can't use async functions inside the jsx Thanks for the correction
vital anvil
It does work actually
flat patio
Hmm
vital anvil
I can get the content
I'm having difficulties with the isIndex logic here
Guess I have to rewrite if (toRender !== undefinded) part again
Didn't want to, since it's copy & paste, which is bad practise
flat patio
Ahh that's actually not valid jsx
You could wrap everything after the return
This should work
{
async () => {
if (toRender !== undefined) {
const { data } = toRender;
const { Content } = await toRender.render();
return (
<>
{ isIndex ? <h1>{ data.title }</h1> : <h1>{ data.title }<span class="primary"> posts</span></h1> }
<Content />;
</>
)
}
}
}
Following worked just fine, thanks for helping
{
async () => {
if (toRender !== undefined) {
const { data } = toRender;
const { Content } = await toRender.render();
return (
<>
{ isIndex ? <h1>{ data.title }<span class="primary"> posts</span></h1> : <h1>{ data.title }</h1> }
<Content />
</>
)
}
}
}