first pass at rendering iterables #335
Conversation
There was a problem hiding this comment.
looks great tom.
i think we also need a note (alertbox) somewhere on the page that lets people know the type signature of the functions does not matter at all to foreach. It's the type annotation on the state var that determines what operations are available (e.g. when nesting).
docs/rendering_iterables.md
Outdated
|
|
||
| # Rendering Iterables | ||
|
|
||
| You will often want to display multiple similar components from a collection of data. The `rx.foreach` component takes an `iterable(list, tuple or dict)` and a `function` that renders each item in the list. This is useful for dynamically rendering a list of items defined in a state. |
There was a problem hiding this comment.
i think it should say either
... component takes an iterable (list, tuple, or dict)
or
... component takes a list, tuple, or dict
Probably the first one, since it makes it more clear that the iterable is one arg of which different types may be supplied.
docs/rendering_iterables.md
Outdated
| lambda color, index: colored_box_index( | ||
| color, index | ||
| ), |
There was a problem hiding this comment.
does it not work if colored_box_index function is passed directly? or is this just to show that a lambda can also be used?
If the latter, then i'd suggest just collapsing the body of colored_box_index into the lambda function
docs/rendering_iterables.md
Outdated
|
|
||
| ## Dictionary | ||
|
|
||
| We can iterate through a `dict` data structure using a `foreach`. When the dict is passed through to the function that renders each item, it is presented as a list of key-value pairs `([1, "blue"],[2, "red"], [3, "green"])`. |
There was a problem hiding this comment.
i think the example would look more familiar as a list of tuple, rather than a tuple of list... and using something other than int indexing might illustrate the use case better.
[("sky", "blue"), ("balloon", "red"), ("grass", "green")]
docs/rendering_iterables.md
Outdated
|
|
||
| ## Nested examples | ||
|
|
||
| `rx.foreach` can be used with nested state vars. Here we use nested `foreach` components to render the nested state vars. The `rx.foreach(project["technologies"], get_badge)` inside of the `project_item` function, renders the `dict` values which are `lists`. The `rx.box(rx.foreach(NestedState.projects, project_item))` inside of the `projects_example` function renders each of the `dicts` inside of the overall state var `list`. |
There was a problem hiding this comment.
| `rx.foreach` can be used with nested state vars. Here we use nested `foreach` components to render the nested state vars. The `rx.foreach(project["technologies"], get_badge)` inside of the `project_item` function, renders the `dict` values which are `lists`. The `rx.box(rx.foreach(NestedState.projects, project_item))` inside of the `projects_example` function renders each of the `dicts` inside of the overall state var `list`. | |
| `rx.foreach` can be used with nested state vars. Here we use nested `foreach` components to render the nested state vars. The `rx.foreach(project["technologies"], get_badge)` inside of the `project_item` function, renders the `dict` values which are `list`. The `rx.box(rx.foreach(NestedState.projects, project_item))` inside of the `projects_example` function renders each `dict` inside of the overall state var `projects`. |
we should avoid code literal unless the value is the actual exact name of some code you would type... dict instead of dicts and list instead of lists
docs/rendering_iterables.md
Outdated
| ``` | ||
|
|
||
|
|
||
| If you want an example where not all of the values in the dict are the same type then check out the example on [var operations using foreach]("https://reflex.dev/docs/state/var-operations/#get-item-(indexing)"). |
There was a problem hiding this comment.
| If you want an example where not all of the values in the dict are the same type then check out the example on [var operations using foreach]("https://reflex.dev/docs/state/var-operations/#get-item-(indexing)"). | |
| If you want an example where not all of the values in the dict are the same type then check out the example on [var operations using foreach]("/docs/state/var-operations/#get-item-(indexing)"). |
link should be relative
There was a problem hiding this comment.
changed it to use : {var_operations.path}
Co-authored-by: Masen Furer <m_github@0x26.net>
docs/rendering_iterables.md
Outdated
| } | ||
|
|
||
|
|
||
| def display_colors(color: list): |
There was a problem hiding this comment.
i wonder if this would look better with a fuller annotation, like list[str, list[str]]
There was a problem hiding this comment.
updated to include this
No description provided.