Rendering Lists

Feliz leverages F#'s powerful list expressions to make rendering lists of elements simple and concise.

Example

List rendering using for loop

• Static item 1
• Item 0
• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

List rendering using List.map

1. Item 0
2. Item 1
3. Item 2
4. Item 3
5. Item 4
6. Item 5

Show code

module Examples.Feliz.RenderingLists

open Feliz

type RenderingLists =

    [<ReactComponent(true)>]
    static member Example(?list: int list) =

        let items = defaultArg list [ 0 .. 5 ] //any list/seq/array

        Html.div [
            Html.h2 "List rendering using for loop"
            Html.ul [
                Html.li "Static item 1"
                for item in items do // f# for loop, nicely combinable with other children
                    Html.li [
                        prop.key item
                        prop.text (sprintf "Item %i" item)
                    ]
            ]

            Html.h2 "List rendering using List.map"
            items // f# pipe style
            |> List.map (fun item ->
                Html.li [
                    prop.key item
                    prop.text (sprintf "Item %i" item)
                ])
            |> Html.ol

        ]

For loops

You can use for loops inside a list expression to generate a list of elements:

let items = defaultArg list [ 0 .. 5 ]

Html.ul [
    Html.li "Static item 1"
    for item in items do // f# for loop, nicely combinable with other children
        Html.li [
            prop.key item
            prop.text (sprintf "Item %i" item)
        ]
]

Mapping functions

You can also use List.map to transform a list of data into a list of elements:

let items = defaultArg list [ 0 .. 5 ]

items // f# pipe style
|> List.map (fun item ->
    Html.li [
        prop.key item
        prop.text (sprintf "Item %i" item)
    ])
|> Html.ol