Pick Helper

The pick helper is a quick way to read object key values at any level without sacrificing readability and reactivity of state.

The problem

If you have a state value and try to read a deep value it would look like so:

const [user, setUser] = state({name: "John Doe"})

html`${() => user().name}`

The issue here is that when the user changes the DOM will not update because the template only react to states that are provided directly in the template. The above example a function is provided and the template cannot see inside the function to see the state and subscribe to changes.

Instead, you can use the pick helper which lets you provide the object and the keychain to look for

const [user, setUser] = state({name: "John Doe"})

html`${pick(user, 'name')}`

The template in this case sees the state because the helper will tell the template about it and therefore update when the state changes.

It takes two arguments and both are required.

pick(OBJECT, KEYCHAIN_STRING)

• OBJECT: Any JavaScript object which value can be chained to access the value (Array, Object).
• KEYCHAIN_STRING: A string with dot separated keys.

Deep values

It would not be fair if the key access was shallow. The problem would persist for access of deep values.

The pick helper second argument can be a dot-notation string that can go deep.

html`${pick(user, 'role.name')}`

html`${pick(list, '1.status.value')}`

html`${pick(response, 'projects.0.name')}`

You may also use it to access other keys from the object, for example the length or size.

html`${pick(list, 'length')}`

html`${pick(set, 'size')}`