What is the best way to handle conditional rendering while reusing props?

[mamaart]

I am trying to make a TextField component which has some kind of validation and will be shown as an error textfield in case of an error.

First I implemented a normal text field component and then I implemented an error text field component, and then I implemented an interactive component using .

I got a problem because my textfield components were taking a lot of props and I could not reuse them in the fallback without cloning each prop and assigning them to new variable names.

I didn't like that so I tried just making an if else instead of the show, and put everything into the same function: here is an example

#[component]
pub fn txt_field(
    label: String,
    #[prop(into)] validate: Callback<String, String>,
    #[prop(optional)] name: String,
    #[prop(optional)] placeholder: String,
) -> impl IntoView {
    let (value, set_value) = create_signal(String::new());
    let (err, set_err) = create_signal::<String>(String::new());

    if !err().is_empty() {
        view! {
        <div>
          <label for={name.clone()} class="block text-sm font-medium leading-6 text-gray-900">{label}</label>
          <div class="relative mt-2 rounded-md shadow-sm">
            <input
                type="text"
                on:input=move |ev| {
                    let s = event_target_value(&ev);
                    set_err(validate(s.clone()));
                    set_value(s);
                }
                prop:value=value
                name={name.clone()}
                id={name.clone()}
                class="block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6"
                placeholder={placeholder}
                aria-invalid="true"
                aria-describedby="error"
            />
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
              <svg class="h-5 w-5 text-red-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
              </svg>
            </div>
          </div>
          <p class="mt-2 text-sm text-red-600" id="error">{err}</p>
        </div>
        }
    } else {
        view! {
        <div>
          <label for={name.clone()} class="block text-sm font-medium leading-6 text-gray-900">{label}</label>
          <div class="mt-2">
            <input
              type="text"
              name={name.clone()}
              on:input=move |ev| {
                  let s = event_target_value(&ev);
                  set_err(validate(s.clone()));
                  set_value(s);
              }
              prop:value=value
              id={name.clone()}
              placeholder={placeholder}
              class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
            />
          </div>
        </div>
        }
    }
}

Now my problem is that the if/else only runs one time. So when my error state updates nothing changes.

I tried another implementation where I use Show in a smaller scope and then use dynamic classes, but since I have a lot of classes I would have to make a ton of checks:

Here is my latest implementation (which has an error that I cannot use space in the dynamic class):

#[component]
pub fn text_field(
    label: String,
    #[prop(into)] validate: Callback<String, String>,
    #[prop(optional)] name: String,
    #[prop(optional)] placeholder: String,
) -> impl IntoView {
    let (value, set_value) = create_signal(String::new());
    let (err, set_err) = create_signal::<String>(String::new());
    view! {
        <div>
          <label for={name.clone()} class="block text-sm font-medium leading-6 text-gray-900">{label}</label>
          <div class="relative mt-2 rounded-md shadow-sm">
            <input
                type="text"
                on:input=move |ev| {
                    let s = event_target_value(&ev);
                    set_err(validate(s.clone()));
                    set_value(s);
                }
                prop:value=value
                name={name.clone()}
                id={name.clone()}
                class=classes!(
                    "block",
                    "w-full",
                    "rounded-md",
                    "border-0",
                    "py-1.5",
                    "ring-1",
                    "ring-inset",
                    "focus:ring-2",
                    "focus:ring-inset",
                    "sm:text-sm",
                    "sm:leading-6"
                )
                class=("text-gray-900 shadow-sm ring-gray-300 placeholder:text-gray-400 focus:ring-indigo-600", move || err().is_empty())
                class=("pr-10 text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500", move || !err().is_empty())
                placeholder={placeholder}
            />
            <Show when=move||{!err().is_empty()}>
                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                  <svg class="h-5 w-5 text-red-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
                  </svg>
                </div>
            </Show>
          </div>
          <Show when=move||!err().is_empty()>
              <p class="mt-2 text-sm text-red-600" id="error">{err()}</p>
          </Show>
        </div>
    }
}

I am using it like this:

                    <TextField
                      name="first_name".to_string()
                      placeholder="Martin".to_string()
                      label="First Name".to_string()
                      validate={|s| {
                          if s == "martin" {
                              logging::log!("{}: hello", s);
                              "martin is not approved".to_string()
                          } else {
                              logging::log!("not martin");
                              String::new()
                          }
                      }}
                    />

Update

I just realized that I probably cannot do this because I want to use it in an actionform, and the actionform requires me to have all my input and buttons as pure html (not components) or else it will panic

[gbj]

This is not reactive

if !err().is_empty() {

This would be reactive

move || if !err().is_empty() {

I'll be honest and say I didn't read through the rest in detail... examples with a lot of Tailwind baked in can be hard to process.

the actionform requires me to have all my input and buttons as pure html (not components) or else it will panic

This doesn't sound right to me and could either be a bug or something else going wrong.

[mamaart]

I'll be honest and say I didn't read through the rest in detail... examples with a lot of Tailwind baked in can be hard to process.

Thats the point! :-) I hate having to make a textfield styling so verbose when I am gonna use the same styling though the whole application.

I would like to be able to abstract away all unreadable stuff. And to make a reactive form where each input field can be validated separately and change its error state.

For now I will just make an error box in the top of the form listing any errors that might occur.