How can I ensure only one component remains highlighted at a time in Elm 0 17

Question

can someone help me with How can I ensure only one component remains highlighted at a time in Elm 0.17?

Answer 1

In Elm 0.17, ensure only one component remains highlighted by maintaining a single highlightedId in your model. Update this ID on user actions, and use it to conditionally apply the highlight style in your view function.

type alias Model = { highlightedId : Maybe Int }

view : Model -> Html Msg
view model =
    div []
        [ button [ style (if model.highlightedId == Just 1 then highlightStyle else []) ] [ text "Button 1" ]
        , button [ style (if model.highlightedId == Just 2 then highlightStyle else []) ] [ text "Button 2" ]
        ]

NoteU: pdate highlightedId in your update function based on user interaction.