Is conditional rendering possible?

I have the following code:

export default function Upsert() {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  const program = getProgram(() => searchParams.id);
  const mutation = postProgram(() => {
    navigate("/admin/programs");
  });

  const [, { Form, Field }] = createForm<Program>({
    validate: valiForm(programSchema),
    initialValues: program.data,
  });

  return (
    <Stack>
      <h1 class="h1">Create program</h1>
      <Form onSubmit={(values) => mutation.mutate(values)}>
        <Stack>
          <Field name="name">
            {(field, props) => (
              <TextField
                {...field}
                {...props}
                label="Name"
                error={merge(field, mutation)}
              />
            )}
          </Field>
          <Button type="submit" class="self-start">
            Create
          </Button>
        </Stack>
      </Form>
    </Stack>
  );
}

export default function Upsert() {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  const program = getProgram(() => searchParams.id);
  const mutation = postProgram(() => {
    navigate("/admin/programs");
  });

  const [, { Form, Field }] = createForm<Program>({
    validate: valiForm(programSchema),
    initialValues: program.data,
  });

  return (
    <Stack>
      <h1 class="h1">Create program</h1>
      <Form onSubmit={(values) => mutation.mutate(values)}>
        <Stack>
          <Field name="name">
            {(field, props) => (
              <TextField
                {...field}
                {...props}
                label="Name"
                error={merge(field, mutation)}
              />
            )}
          </Field>
          <Button type="submit" class="self-start">
            Create
          </Button>
        </Stack>
      </Form>
    </Stack>
  );
}

getProgram and postProgram are wrappers around solid-query. When accessing the page with an id in the query string (eg. ?id=123) the first time, initialValues equals to undefined as the query is not yet finished and program.data is undefined. Then the query resolved and now program.data is populated, but the form is already rendered so the form does not have any default values. Hitting a second time the same page with the same id will lead to a populated form: the cache is already present so this time program.data is defined. Is it possiple to trigger a re-rendering à la React - (don't shoot me 🙈 ) - to rerun createForm with the actual data? Or should I extract the createForm + <Form /> is a separate component and wrap it with a conditional <Show />?

14 Replies

Brendonovich•8mo ago

Personally I’d do the latter - don’t create the form until initial data is ready, unless you want the form to still render while the data loads, in which case id reset the form once the data loads with the new data

binajmenOP•8mo ago

the trick is I would like to reuse the form for both insert and update

id reset the form

meaning having a formRef.reset()? not sure if modular forms allow to reset a form

Brendonovich•8mo ago

I think the form state should have a reset function?

binajmenOP•8mo ago

binajmenOP•8mo ago

nope 😦 I think I'll have to do the latter or separate the views create and update

Brendonovich•8mo ago

Hmm rip

binajmenOP•8mo ago

haha, rest in peace?

mdynnl•8mo ago

here's the docs https://modularforms.dev/

binajmenOP•8mo ago

I swear I read it 4 times already yet... there is indeed a way to reset the form (https://modularforms.dev/solid/api/reset)

  createEffect(() => {
    reset(form, {
      initialValues: program.data,
    });
  });

  createEffect(() => {
    reset(form, {
      initialValues: program.data,
    });
  });

ty both for the brainstorming and the pointers 🙏

Brendonovich•8mo ago

Ahhh right it’s a separate function

crowned•8mo ago

Is this VSCode? If so, what theme?

binajmenOP•8mo ago

Zed editor "theme": "Gruvbox Dark", "font_family": "JetBrainsMono Nerd Font Mono"

crowned•8mo ago

Okayy. I’ll check out the editor.

binajmenOP•8mo ago

perhaps the theme exist for vscode too

Gaming

Programming

Is conditional rendering possible?