How to handle dynamic data when using usePress from react-aria?

[mryechkin]

I have a scenario where I'm rendering a bunch of buttons using some dynamic data, for example something like this (simplified):

const items = [{ id: 1, name: "Foo" }, { id: 2, name: "Bar" }] // etc.

// ...

{items?.length && items.map((item) => (
  <button onClick={() => handlerFunction(item.id)}>
    {item.name}
  </button>
))}

And I'm a bit stuck on how to handle this scenario. With a single button it's straightforward:

const { pressProps } = usePress({ onPress: () => handlerFunction(some.data) });

// ...

<button {...pressProps}>{some.name}</button>

But how do I do this when there are multiple buttons, all needing their own pressProps?

Any advice would be appreciated! Thanks

[snowystinger]

You could make a Button component. It's the same way you'd handle any hook that needs to be run separately for each instance in the loop.
Then you just pass your handlerFunction and name to the Button

[mryechkin]

Ah, right. I was looking at it from a single-use perspective, but that certainly makes sense. Thanks!