Class toggle React?

Question

React

The switch does not work. I need to change the value in the switcherlanguage paragraph when clicking on the link, for example from RU to EN and vice versa.

<div className="multilang">
                          <p className="switcherlanguage">EN</p>
                          <p className="switcherlanguage">RU</p>
                          <Link href={'/'}
                                onClick={() =>
                                    router.push(router.asPath, router.asPath, {
                                        locale: "ru",
                                    })
                                }
                          >
                              <a>
                                  <svg width="28" height="28" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                      <path d="M26 12L16 22L6 12" stroke="black" stroke-opacity="0.87" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                  </svg>
                              </a>
                          </Link>
                      </div>

Answer 1

NextJs 10+

const LanguageSwitcher = () => {
    const { locales, locale, asPath, reload } = useRouter();

    return (
        <div className="multilang">
            {locales.map((lng) => {
                if (lng === locale) return null;

                return (
                    <>
                        <p className="switcherlanguage">{lng}</p>
                        <Link href={asPath} locale={lng} key={lng}>
                            <a>
                                <svg
                                    width="28"
                                    height="28"
                                    viewBox="0 0 32 32"
                                    fill="none"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <path
                                        d="M26 12L16 22L6 12"
                                        stroke="black"
                                        stroke-opacity="0.87"
                                        stroke-width="2"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                </svg>
                            </a>
                        </Link>
                    </>
                );
            })}
        </div>
    );
};