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

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|         [ 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 =
[ x (String.fromInt cell.x)
, y (String.fromInt cell.y)
, width “20”
, height “20”
, fill “orange”

view : Model -> Html msg
view model =
[ viewBox “0 0 400 400”
, width “400”
, height “400”
g []
[ 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| 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 but it doesn’t seem to help because the flattening needs to happen after the square brackets, not before.

Any help would be appreciated!

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 [] renderCell model.grid

There are several ways to resolve the precedence issue.

With parenthesis:

g []
  ( renderCell model.grid)

or with a pipe operator

g []
  <| renderCell model.grid

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

  |> renderCell
  |> g []

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

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.