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.

Listbox selected render prop argument does not work

See original GitHub issue

Hi, in the second Listbox example here the selected render prop argument does not work. It worked for me only after I changed the Listbox.Option value to person.name instead of person. Im working on CRA without any other dependencies.

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:5 (1 by maintainers)

Top GitHub Comments

5reactions

merodirocommented, Oct 12, 2020

I just had the same problem, the problem is in the example people array is inside the component function so it’s created every time with new objects. I was able to fix it by moving the array outside the component

here’s an example of the working and the broken ones

https://codesandbox.io/s/elastic-swartz-ruy9e?file=/src/App.js

0reactions

RobinMalfaitcommented, Oct 12, 2020

@merodiro yep you are correct, I fixed the readme’s. Thanks!

Top Results From Across the Web

HeadlessUI render props in Twin - neldeles

Listbox.Option by default renders as a <li> element. But if you pass in the as={Fragment} prop value, it becomes..a fragment. Then in the...

Listbox (Select)

Each component exposes information about its current state via render props that you can use to conditionally apply different styles or render different...

Each child in a list should have a unique "key" prop ...

Warning: Each child in a list should have a unique "key" prop. Check the render method of `MyComponent`. in React. The error message...

@headlessui/react - npm

To style the selected Listbox.Option you can read the selected render prop argument, which tells you whether or not that listbox option is...

Listbox

If you want access to the listbox's current value and associated label, or its expanded state, you can use a render function. <ListboxInput>...