Each child in a list should have a unique "key" prop

[njlr]

I am hitting this error with a simple application:

Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.

[<Erase>]
type Wouter =

  [<ReactComponent("Link", "wouter")>]
  static member link(href : string, children : seq<ReactElement>) =
    React.Imported ()

[<ReactComponent>]
let App () =
  Html.div [
    Html.h1 "Hello, World!"

    Wouter.link(
      "/abc",
      [
        Html.text "Go to abc"
      ]
    )
  ]

let rootElement = Browser.Dom.document.getElementById "root"
let reactRoot = ReactDOM.createRoot rootElement

reactRoot.render (App ())

I do not hit the error if I remove this:

    Wouter.link(
      "/abc",
      [
        Html.text "Go to abc"
      ]
    )

Version info:

{
  "name": "ui",
  "version": "0.1.0",
  "private": true,
  "description": "",
  "type": "module",
  "source": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "packageManager": "pnpm@10.33.0",
  "devDependencies": {
    "parcel": "^2.16.4"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "wouter": "^3.9.0"
  }
}

• Feliz 3.2.0
• Fable 5.0.0-rc.6

Related to #652?
I tried React 19 and 18, however.

[Freymaurer]

Hey! I think i know why this message appears.

[<ReactComponent>]used as import statement does not handle children by passing them as ...children. This is currently only done for Html.XX. i think i can fix this relatively soon. Until then you could try using React.Fragment and pass only 'ReactElement' instead of an array/list

[njlr]

Yes, this is a good work-around 👍

[<Erase>]
type Wouter =

  [<ReactComponent("Link", "wouter")>]
  static member link(href : string, children : ReactElement) =
    React.Imported ()

  static member link(href : string, children : seq<ReactElement>) =
    Wouter.link(href, React.Fragment children)