syntax icon indicating copy to clipboard operation
syntax copied to clipboard

Improve syntax error diagnostic for JSX spread syntax

Open ryyppy opened this issue 5 years ago • 0 comments

The react-jsx ppx currently reports an unsolvable error when using the children spread syntax with JSX. Also, when reformatting <div> ...children </div>, the formatter rewrites to <div/>. So my wild guess is that the spread syntax was kinda forgotten when fine-tuning reason-react and the rest of the toolchain.

Example:

This code:

module Test = {
  @react.component
  let make = () => {
    let elements = list{<div/>, <div/>}
    <div> ...elements </div>
  }
}

let foo = <Test />

raises following error:

Invalid_argument("A spread as a DOM element's children don't make sense written together. You can simply remove the spread.")

Playground Link

Proposed change:

I guess people shouldn't be using lists for children anyways, so might be worth to tell the user to convert the list to an array, and then to an React.element instead?

\cc @rickyvetter

ryyppy avatar Jan 03 '21 10:01 ryyppy