Form with arbitrary number of a custom component

[EloiSanchez]

Hey. I just started to use this as an alternative to something like Streamlit to obtain a more reactive and interactive application.

Summary

I want to create a Form that allows a user to add an arbitrary amount of Work Experiences (like in a CV).

I have made a component WorkXPState that inherits from rx.ComponentState. Then I inherit this in the form page (called consultant_profile.py), but I am having trouble allowing the user to have a button that adds a new Work Experience component that they can fill in.

The FormState needs to know how many Work Experiences to display, so I have a num_work_experiences variable that is incremented by 1 when the user presses a button in the form. But now I am having trouble rendering each of the Work Experience components.

Code

This is the component I made. It holds the variables I want to keep track off and update in the form. It also implements the classmethod get_component, as explained in the docs, with the UI stuff that I want to render.

# components/work_experience.py

class WorkXPState(rx.ComponentState):
    company_name: str
    description: str
    start_year: str = "2020"
    start_month: str = "February"
    end_year: str = "2022"
    end_month: str = "January"

    @rx.event
    def change_start_year(self, value: str):
        self.start_year = value

    # ...
    # Other events
   # ....

    @classmethod
    def get_component(cls, id: int, **props) -> rx.Component:
        return rx.form.field(
            rx.card(
                rx.vstack(
                    rx.heading(f"Work Experience {id}"),
                    rx.input(placeholder="Company Name", on_blur=cls.set_company_name),
                    ... # Removed code for simplicity
                 ),
            )
        )

# As shown in the documentation
reusable_work_xp = WorkXPState.create

Then, in the page script for consultant_profile, I import the reusable_work_xp.

This is the FormState

# pages/consultant_profile.py

class FormData(rx.State):
    work_experiences: list[str] = []  # I create this list in order to iterate in the foreach of render_work_experiences
    num_work_experiences: int = 0 # In order to have a counter that allows me to send an id as a number in each element of the above list
    form_data: dict = {}

    @rx.event
    def handle_submit(self, form_data: dict):
        self.form_data = form_data

    @rx.event
    def add_work_experience(self):
        self.num_work_experiences += 1
        self.work_experiences.append(str(self.num_work_experiences))

These are the functions that I am calling from the page definition to render the work experiences in the form.

# pages/consultant_profile.py

def render_work_experience(id):
    return reusable_work_xp(id)

# I needed to define the render_work_experience function instead of calling reusable_work_xp 
# otherwise, an error would show up saying that using a ComponentState as render_fn inside foreach is not supported yet
def render_work_experiences(work_experiences: rx.Var[list[str]]):
    return rx.foreach(work_experiences, render_work_experience)

This is the definition of the page that creates the UI.

# pages/consultant_profile.py

@rx.page("/consultant-profile/[consultant_id]")
def consultant_profile():
    return rx.center(
        rx.form.root(
            rx.vstack(
                rx.input(placeholder="First Name", name="first_name"),
                rx.input(placeholder="Last Name", name="last_name"),
# If I add the components like this, each of them is independent and it works fine. But then it is not dymamic
                # reusable_work_xp(1),
                # reusable_work_xp(2),

# If I add the components like this, all of them are linked together, and changing a field of one modifies the rest as well in the UI.
                render_work_experiences(FormData.work_experiences),
                rx.button("Add work experience", on_click=FormData.add_work_experience),
                rx.button("Submit", type="submit"),
            ),
            rx.text(FormData.form_data.to_string()),
            on_submit=FormData.handle_submit,
        ),
)

This is what I get now.

Both work experiences, added with the button Add work experience, are modified when either of them is. I.e., If I select start year 1990 in one of them, then both of them are modified.

I am having lots of trouble understanding how to have this form in a way that I can have a button to add new components that I define elsewhere. I would like to do the same with Academic Education and a Skills section.

Dooes anyone have any tip on how to make this kind of architecture, where a form can dynamically add custom components with a defined structure/UI?

Thanks.

[adhami3310]

This is the same as #3718, one thing you might do is store in the state a list of objects that are the work experience information