"SyntaxError: Unexpected token, expected ..." on <input {checked} />

[yusufbaklaci]

Hi,

I am trying to set a radio input as 'checked', depending on a variable:

const checked = true;
patch(document.body, () => {return <input type="radio" {checked ? 'checked' : ''} />} );

But in this case I am receiving:

Module build failed: SyntaxError: Unexpected token, expected ... (14:55)

  12 | 
  13 | const checked = true;
> 14 | patch(document.body,() => {return <input type="radio" {checked?'checked':''} />});
     |                                                        ^

This isn't the case if I am trying to set a key-value pair to the DOM element.

Am I missing something, or this isn't implemented yet?

Thank you very much. Yusuf

[jridgewell]

That's a syntax error, you can't have {attr} attribute expression. It has to be something like attr={checked ? '' : undefined}

[yusufbaklaci]

Thanks for your quick response. In my situation I need to have {attr} kind of syntax to be able to check or uncheck a radio button or a checkbox. May I send a pull request to try to implement this behaviour.

Best Yusuf

[jridgewell]

It's not a plugin limitation, but a syntax one. You'd have to submit a PR to https://github.com/facebook/jsx, which would need to implemented by Babel, then I could support it.

[yusufbaklaci]

Thanks a lot for your help. Have a nice weekend.

[jridgewell]

Oh, and note that iDOM treats undefined as "remove this attribute. So you can have your original request with:

<input type="radio" checked={checked ? '' : undefined} />

// Translates into Real DOM as either->
<input type="radio" checked />
// or
<input type="radio" />

[yusufbaklaci]

Awesome. That solved my problem. Thanks a lot. One last thing. In the Readme file it is provided that to use this plugin .babelrc should have:

{ "presets": ["es2015"], "plugins": ["incremental-dom"] }

But this leads to this Error:

Module build failed: Error: Plugin 0 specified in ".babelrc" provided an invalid property of "patch"

I found out that actually it should be like this to be able to use your plugin:

{
  "presets": ["es2015"],
  "plugins": ["babel-plugin-transform-incremental-dom"]
}

I hope I am not missing something basic here this time :)

[jridgewell]

Whoops, look like I forgot those when I updated the plugin name.