SolidJSS
SolidJS•2y ago•
21 replies
binajmen

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>
  );
}

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 />?
Was this page helpful?