[ENG-4001] Doc bash fixes for UI section

[picklelo]

No description provided.

[linear]

ENG-4001 Finish Components and Props

[tgberkeley]

might be nice for this example to actually define class-name-1 and class-name-2 so it is a bit more tangible what is happening here, as people coming from a non-web dev background might be like what is happening in this example?

[tgberkeley]

don't see any change here?

[tgberkeley]

I think it is confusing that some examples are using a lambda and other a separately defined function. I think in the docs we should only show one way to do it which should be the defining a separate function. Where we mention that you can do lambda functions we should show one easy example (the same color example with a lambda) to show what it looks like and that is it.

[ElijahAhianyo]

We can stick to using a separate function by default. However, for some cases, maybe it would make sense to show what using a lambda would look like. Typical example is the section on enumerating iterables where there's an index arg.
With the lamda, the index arg is explicitly stated whereas using with the case of defining a function, an extra arg/param would represent the index. Code below

Using Lamda:

class IterIndexState(rx.State):
    color: list[str] = [
        "red",
        "green",
        "blue",
    ]


def enumerate_foreach():
    return rx.vstack(
        rx.foreach(
            IterIndexState.color,
            lambda color, index: rx.box(
                rx.button(f"{index + 1}. {color}"),
                padding_y="0.5em",
            ),
        ),
    )

Using a defined function.

class IterIndexState(rx.State):
    color: list[str] = [
        "red",
        "green",
        "blue",
    ]


def create_button(color: rx.Var[str], index: int) -> rx.Component:
    return rx.button(
        f"{index + 1}. {color}",
        padding_y="0.5em",
    )


def enumerate_foreach():
    return rx.vstack(
        rx.foreach(
            IterIndexState.color,
            create_button,
        ),
    )
    ```

[tgberkeley]

I think for this enumerating iterables example we should show both the examples with the defined function and the lambda so people know that they are identical and that they can do either