I am trying to do a simple router push in a select option with react, so far my router push works but I can't update my default value, I can't properly set my state, not sure what I am doing wrong here:
const navigation = [
{ name: 'Profil', href: '/unternehmen/profil' },
{ name: 'Geschichte', href: '/unternehmen/geschichte' },
]
const SubNavigation = () => {
const [selectedSubNav, setSelectedSubNav] = useState('')
const router = useRouter()
const onSubNavChange = (e: ChangeEvent<HTMLSelectElement>) => {
e.preventDefault()
const subName = navigation.find((nav) => nav.href === e.target.value)?.name
console.log('subName: ' + subName)
setSelectedSubNav(subName)
console.log('selectedSubNav: ' + selectedSubNav)
router.push(e.target.value)
}
return (
<div className="relative pb-5 sm:pb-0">
<div className="mt-4">
<div className="sm:hidden">
<select
id="current-tab"
name="current-tab"
defaultValue={selectedSubNav}
onChange={(e) => onSubNavChange(e)}
>
{navigation.map((navItem) => (
<option value={navItem.href} key={navItem.name}>
{navItem.name}
</option>
))}
</select>
</div>
The router push works, but I can't set the value in my select option to that value I am setting my state to.
try update selectedSubNav with useEffect:
const navigation = [
{ name: 'Profil', href: '/unternehmen/profil' },
{ name: 'Geschichte', href: '/unternehmen/geschichte' },
]
const SubNavigation = () => {
const [selectedSubNav, setSelectedSubNav] = useState('')
const router = useRouter()
useEffect(() => {
const currentPath = navigation.find((nav) => nav.href === router.asPath)?.href
setSelectedSubNav(currentPath)
},[])
const onSubNavChange = (e: ChangeEvent<HTMLSelectElement>) => {
e.preventDefault()
const subName = navigation.find((nav) => nav.href === e.target.value)?.name
console.log('subName: ' + subName)
setSelectedSubNav(subName)
console.log('selectedSubNav: ' + selectedSubNav)
router.push(e.target.value)
}
return (
<select
id="current-tab"
name="current-tab"
defaultValue={selectedSubNav}
onChange={(e) => onSubNavChange(e)}
>
{navigation.map((navItem) => (
<option value={navItem.href} key={navItem.name}>
{navItem.name}
</option>
))}
</select>
)