Blueprint: How do you use Select and onItemSelect

[iongion]

The demos are here

https://github.com/palantir/blueprint/blob/%40blueprintjs/labs%400.14.4/packages/docs-app/src/examples/labs-examples/selectExample.tsx

But it is hard to understand what the equivalent ES6 form is, so far I do this:

class Arena {}
const ArenaSelect = Select.ofType(Arena);
const items = [ { data: 1, text: '1' } ];
const arenaFilterItemSelected = (it) {
  console.log(it); // not a value but a Proxy with Target, Handler and IsRevoked members
}
// ...
<ArenaSelect
  items={items}
  onItemSelect={arenaFilterItemSelected}
  closeOnSelect
>
    <Button rightIconName="caret-down" text={selected ? selected.label : '- select -'} />
</ArenaSelect>

Now, the onItemSelect gets a Proxy, how can I get the actual item value ?

[reiv]

At first glance this doesn't look like it should be working at all. A few things I've noticed:

• Select.ofType() is only needed if you are using TypeScript (to take advantage of generic types). It's a no-op in plain JS; you can just use Select in place of ArenaSelect.
• I assume arenaFilterItemSelected is supposed to be an arrow function? It's missing the => part.
• Select needs an itemRenderer prop so it knows how to render your items.
• closeOnSelect is not a valid prop; did you mean resetOnSelect?

Assuming your example is in a working state, it sounds like the "Proxy" your onItemSelect is getting is a reference to the click event that triggered it (wrapped by React to be a proxy around the native browser event). But onItemSelect should receive two args: the item and the event.

[giladgray]

@iongion a few things:

1. the example source code is your go-to reference for how to use these components. start by copying the code exactly, then modifying to suit your use case.
2. @reiv's comment is spot on: your code sample above is not valid for all the reasons he outlined.
3. you linked to the 1.0 example source code. if you are using 2.0 packages (such as @blueprintjs/select or [email protected]) then you'll want to refer to the v2 docs as usage has changed significantly. _(labs <= 0.14 uses 1.0 APIs, but 0.15 uses 2.0. after 0.15, labs components were moved to select)_
4. finally, TypeScript code _is_ ES6 code (plus type annotations). if you're struggling to understand it, check out this docs page.

[iongion]

Thank you guys!

[Amarendra2627]

how do I declare itemRender can you show me the example?