question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

use `undefined` instead of `null` for empty `form` prop

See original GitHub issue

Describe the problem

Using the new actions feature of SvelteKit, when loading the page the form prop is set to null. In my usecase I return an errors object if some of the form fields don’t pass the validation in the action.

To not having to deal with unnecessary if checks or optional chainings, I’m setting errors to an empty object when the page loads and form is still null.

<script>
	export let form
	$: ({ errors } = form || { errors: { } }
</script>

{#if errors.email}
	invalid email address
{/if}

{#if form.errors.password} <!-- Uncaught TypeError: Cannot read properties of null (reading 'errors') -->
	please enter a stronger password
{/if}

This works fine, if I only use the errors object in that file. But if I accidentially access form again, I’ll get an error because form is still null.

To not having the issue above I would need to set the default value like this:

<script>
	export let form
	$: form = form || { errors: { } }
</script>

But this requires me to write additional code.

Describe the proposed solution

form should be undefined and not null to make it possible to set a fallback value like you would do in other Svelte components:

<script>
	export let form = { errors: { } }
	$: ({ errors } = form
</script>

{#if errors.email}
	invalid email address
{/if}

{#if form.errors.password} <!-- no error! -->
	please enter a stronger password
{/if}

Alternatives considered

Leave it as it is.

Importance

would make my life easier

Additional Information

No response

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:8 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
Tal500commented, Oct 10, 2022

You may use the relatively new JS/TS language feature “?”: form?.errors?.blabla

Every “?.*” junction will return undefined if the l.h.s. is undefined or null, and the original value otherwise.

0reactions
ivanhofercommented, Nov 1, 2022

I think this conversation is moving in a different direction.

My initial suggestion was to just use undefined instead of null to be able to set an initial default value when the page loads. With undefined we could use the same concept as for regular Svelte components. Once a form gets submitted the developer is responsible for returning a useful value or to handle cases where nothing gets returned.

Read more comments on GitHub >

github_iconTop Results From Across the Web

What reason is there to use null instead of undefined in ...
Undefined is meant to say that the reference is not existing. A null value has a defined reference to "nothing". If you are...
Read more >
Typescript: when to use null, undefined or empty array?
'null' is assigned to a variable to specify that the variable doesn't contain any value or is empty.
Read more >
Solved: `value` prop on `input` should not be null in React
Consider using an empty string to clear the component or `undefined` for uncontrolled components. return ( <div> <input value={null} /> </div> ); }....
Read more >
Undefined Vs Null in JavaScript - GeeksforGeeks
1. The undefined property indicates that a variable has not been declared at all. The value null represents the absence of any object...
Read more >
Documentation - TypeScript 2.0
In strict null checking mode, the null and undefined values are not in the domain of every type and are only assignable to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found