Skip to content

Conversation

@viniciuslagedo
Copy link
Contributor

Summary

Partially resolves #1505

Now, the inner text from the children of the selected item is used on the selected value. Pay attention to the inner text expression here because it is not precisely the children property. So, no HTML tags will be rendered. I see that as a quick solution to not change all the state logic created.

Examples

Simple

For this example, when the item with value rj is selected, the filter will show 'Cidade: Rio de Janeiro'

const [city, setCity] = useState<string>('')

<Filter label="Cidade" value={city} setValue={setCity}>
  <FilterItem value="rj">Rio de Janeiro</FilterItem>
  <FilterItem value="sp">São Paulo</FilterItem>
  <FilterItem value="mg">Minas Gerais</FilterItem>
 </Filter>

Multiple

For this example, when the items with values rj and mg are selected in that order, the filter will show 'Cidade: Rio de Janeiro, +1'

const [cities, setCities] = useState<string>([])

<Filter label="Cidade" value={cities} setValue={setCities}>
  <FilterItem value="rj">Rio de Janeiro</FilterItem>
  <FilterItem value="sp">São Paulo</FilterItem>
  <FilterItem value="mg">Minas Gerais</FilterItem>
 </Filter>

Use the inner text from the selected item or from the first selected item instead of the value
property. It makes more sense because the children prop is more related to visual purposal

fix #1505
@viniciuslagedo viniciuslagedo requested a review from a team as a code owner September 27, 2024 04:49
@vercel
Copy link
Contributor

vercel bot commented Sep 27, 2024

Deployment failed with the following error:

You don't have permission to create a Preview Deployment for this project.

View Documentation: https://vercel.com/docs/accounts/team-members-and-roles

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

FilterItem: value prop

3 participants