AlexGilleran / jsx-control-statements

Neater If and For for React JSX
https://www.npmjs.com/package/babel-plugin-jsx-control-statements
MIT License
1.62k stars 64 forks source link

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

Open catalin560 opened 1 year ago

catalin560 commented 1 year ago

copy pasted from docs:

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

will render in my page like so: Screenshot 2023-05-10 at 14-09-20 Ionic App

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 commented 1 year ago

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:

IfBlock

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:

{

IfBlock

  </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 https://github.com/AlexGilleran/jsx-control-statements/issues/121, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAG33SZDVBQDJHRNHQGYDF3XFN22RANCNFSM6AAAAAAX4S5R2Q . You are receiving this because you are subscribed to this thread.Message ID: @.***>