conditional statements don't work unless wrapped in brackets. is this supposed to happen?

[catalin560]

copy pasted from docs:

<If condition={true}>
        <h1>IfBlock</h1>
      </If>

will render in my page like so:

only after I wrap the block in brackets it will work as expected:

{
<If condition={true}>
        <h1>IfBlock</h1>
      </If>
}

will render normally...

looking thru the docs I assumed I didn't need to wrap these blocks in brackets, am I missing something?
my project is running the latest vite with the @vitejs/plugin-react plugin, my vite.config.js looks like so:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react({ babel: { plugins: ["macros", "jsx-control-statements"] } })],
  server: {
    hmr: false
  }
});

[AlexGilleran]

You definitely don’t usually need the brackets, I assume it must be something to do with how vite uses babel 🤔

…

On Wed, 10 May 2023 at 9:21 pm, catalin560 ***@***.***> wrote: copy pasted from docs: <If condition={true}> <h1>IfBlock</h1> </If> will render in my page like so: [image: Screenshot 2023-05-10 at 14-09-20 Ionic App] <https://user-images.githubusercontent.com/22744333/237371591-32238e3c-a571-496b-9569-0ea337d17485.png> only after I wrap the block in brackets it will work as expected: {<If condition={true}> <h1>IfBlock</h1> </If>} will render normally... looking thru the docs I assumed I didn't need to wrap these blocks in brackets, am I missing something? my project is running the latest vite with the @vitejs/plugin-react plugin, my vite.config.js looks like so: import { defineConfig } from "vite";import react from ***@***.***/plugin-react"; // https://vitejs.dev/config/export default defineConfig({ plugins: [react({ babel: { plugins: ["macros", "jsx-control-statements"] } })], server: { hmr: false }}); — Reply to this email directly, view it on GitHub <#121>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAG33SZDVBQDJHRNHQGYDF3XFN22RANCNFSM6AAAAAAX4S5R2Q> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[Hurtak]

We are also encountering this issue on latest vite + vitejs/plugin-react. @catalin560 have you found any workarounds (except for wrapping everything in {})?

[catalin560]

@Hurtak I'm sorry I haven't found a solution for this so I just switched to another project https://github.com/romac/react-if

[texttechne]

Hi @catalin560,

beware of the fact that stuff is evaluated when using other solutions:

• A note on transformation
• React-if also documents this