Select - do not display the whole JSX of item in the button

[andreasCampeon]

Hello, I am using the select element and have a whole JSX snippet for each item (icon, title, desc, number of interactions, etc) in the select. I am struggling to find a way to show some pieces from the JSX (e.g. the title only) when the user has selected an item and the "dropdown" is closed.

example: https://codesandbox.io/s/eloquent-banach-c7vpyk
when the user selects an animal from the select, then it should only display the animal name and not the whole JSX (name and link).

[reidbarber]

The Advanced Customization section of the docs is useful for cases like this.

Here is your example updated to show just text when an item is selected: https://codesandbox.io/s/clever-elion-cwy3c2?file=/src/App.js

Note that putting links inside select options isn't valid ARIA since there is no way to access the links via keyboard.

[devongovett]

You can also do this with render props:

<SelectValue>
  {({selectedText}) => selectedText}
</SelectValue>

or use CSS to hide unwanted elements:

.react-aria-SelectValue [slot=description] {
  display: none;
}

[andreasCampeon]

this is working as expected. Thank you !!