SVG Map (The 2nd argument to `g` is not what I expect)

[crabcyborg]

Hi Everyone,

I’m trying out Elm for a short experiment, and I’m stuck on the final piece.

The error I get:

The 2nd argument to `g` is not what I expect:

98|         g []
99|         [List.map renderCell model.grid]
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
This argument is a list of type:

    List (List (Svg Msg))

But g needs the 2nd argument to be:

List (Svg msg)

My problem code:

renderCell: Cell → Svg Msg
renderCell cell =
rect
[ x (String.fromInt cell.x)
, y (String.fromInt cell.y)
, width “20”
, height “20”
, fill “orange”
]

view : Model → Html msg
view model =
svg
[ viewBox “0 0 400 400”
, width “400”
, height “400”
]
[
g
[List.map renderCell model.grid]
]

If I drop the square brackets around my map, I get

The g function expects 2 arguments, but it got 4 instead.

98|> g
99| List.map renderCell model.grid

Are there any missing commas? Or missing parentheses?

So, how do I map multiple children to my svg, or my g tag, when it seems to always be in an additional List? I’ve tried some of the join code in flat map elm-flat-map/src/List/FlatMap.elm at 1.2.0 · ccapndave/elm-flat-map · GitHub but it doesn’t seem to help because the flattening needs to happen after the square brackets, not before.

Any help would be appreciated!

[wondible]

First error: imagine you passed an empty list to the map. You’d effectively have

g [] [ [] ]

Which is indeed a List List.

Second error: Compiler sees a function with four arguments

g [] List.map renderCell model.grid

There are several ways to resolve the precedence issue.

With parenthesis:

g []
  (List.map renderCell model.grid)

or with a pipe operator

g []
  <| List.map renderCell model.grid

For these kinds of things I often like to pipe the other way

model.grid
  |> List.map renderCell
  |> g []

[crabcyborg]

Oh, you’re awesome, thank you. I was able to get my build working further now!