How to set default value on language changer to the current locale?

Question

I am having a problem setting the "defaulValue" of a Language selector to display the locale it is in.

** Note: I am using Nextjs and TailwindCSS

My code looks like this:

import React from 'react'
import { useRouter } from "next/router"

function LanguageSelector() {

    const router = useRouter();

    const locale = router;
    
    const changeLanguage = (e) => {
        router.push(router.pathname, router.pathname,{
            locale: e.target.value,
        })
    }

  return (
    <select defaultvalue={ locale } onChange={changeLanguage} className='bg-black text-white'>
        <option className=' font-light' value='es'>ES</option>
        <option className=' font-light' value='en'>EN</option>
    </select>
  )
}

export default LanguageSelector

Answer 1

You have a typo in your code, it's supposed to be const { locale } = router; instead of const locale = router;. Alternatively defaultvalue={ router.locale } should also work.