SegmentedControl help

345
2
Jump to solution
01-11-2024 02:03 PM
Labels (1)
AudreyWatson
New Contributor II

I'm not sure what I'm missing/doing wrong, or if something else is going on. I'm using the reactor-router-dom package in React for simple navigation, and when I navigate to and from the Home page for example, the current and last SegmentedControlItem are both selected. 

CodeSanbox Link

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
Grant_DeCoux
New Contributor

use this instead of setting checked to undefined

 <CalciteSegmentedControlItem
            // always selects 25 and All when coming back to page
            // checked={rowsShown === rowsConstant ? true : undefined}
            {...(rowsShown === rowsConstant ? { checked: true } : {})}
            value={rowsConstant}
            key={i}
          >
            {rowsConstant}
 </CalciteSegmentedControlItem>

 

View solution in original post

2 Replies
Grant_DeCoux
New Contributor

use this instead of setting checked to undefined

 <CalciteSegmentedControlItem
            // always selects 25 and All when coming back to page
            // checked={rowsShown === rowsConstant ? true : undefined}
            {...(rowsShown === rowsConstant ? { checked: true } : {})}
            value={rowsConstant}
            key={i}
          >
            {rowsConstant}
 </CalciteSegmentedControlItem>

 

AudreyWatson
New Contributor II

Awesome. Thank you! 

0 Kudos