React.js: Switching font/button weight on selection

I am currently using i18next to translate my interface.

const { t, i18n } = useTranslation();

function handleClick(lang) {
        i18n.changeLanguage(lang);
}

This code is applied to two buttons.

<a onClick={ () => handleClick('en') }
   className="language-selector__link">EN</a>

<a onClick={ () => handleClick('de') }
   className="language-selector__link">DE</a>

I am trying to figure out how to change the weight or make the selected language bold. I have attempted something like this but it's not working correctly:

style={ handleClick ? { fontWeight:'800'} : {fontWeight : '400'} }

Any suggestions would be appreciated. Thank you!

Answer №1

Determine the current language

let currentLanguage = getCurrentLanguage();

Apply styles accordingly

style={{ fontWeight: currentLanguage === "en" ? 800 : 400}}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Failed to load resource: The server returned a 404 error when deploying React on Github Pages

Currently working on a React App. Started by deploying on GH page with SASS, but encountered an issue. Can anyone provide guidance on resolving this? Unsure of the specific code needed, so just looking for which part of code is necessary to add. https:/ ...

"Slow loading times experienced with Nextjs Image component when integrated with a map

Why do the images load slowly on localhost when using map, but quickly when not using it? I've tried various props with the Image component, but none seem to solve this issue. However, if I refresh the page after all images have rendered once, they ...

Using percentages for sizing and margins in CSS

Looking to create a visually appealing page that always fills the entire screen? Check out this code snippet that does just that: #posts{ width:100%; height:auto; background:#666; } .entry{ float:left; margin-left: 4%; margin-top:10 ...

What is the best way to include a &nbsp; in a map function using JavaScript?

A challenge I encountered while working in React is as follows: <Grid item> { rolePriorities.map((rp, index) => ( <Chip key={index} label={rp} color="primary" sx={{ color: "whitesmoke" }} /> ...

Stop header background image from loading on mobile browsers by utilizing the <picture> tag

Is there a method to utilize the <picture> element in order to prevent a page from downloading an image when viewed on a mobile phone? I have a website that features a header image. Unfortunately, due to the site's functionality, using CSS (bac ...

Could you please guide me on resolving the Blazor/Bootstrap 5 CSS problem related to styling "striped" tables?

Looking for a solution to fix a CSS issue involving Bootstrap 5 "table-striped" and displaying Blazor Razor components. In my Blazor/Bootstrap 5 page, I have a table displaying content fetched from a service at runtime. Initially, the Bootstrap CSS is vis ...

Having difficulty retrieving React JS values within Node

I am trying to pass data from React to Node.js using fetch, but I am encountering an issue. Below is the code I have implemented: const values = {email,pass} const data = { method: 'POST', headers: { "Content-Type": "applic ...

Is it possible to incorporate an element using absolute positioning using jQuery or Javascript?

When trying to add a new element on the screen, I am facing an issue with the absolute positioning not working properly. Sample Code in Javascript function drawElement(e,name){ $("#canvas").append("<div id='" + name + "' class='e ...

Create a search bar using HTML and CSS that utilizes the GET method

My current challenge involves creating a search functionality using HTML based on the username entered, such as 'user'. Upon clicking the search bar, the page should redirect to http://localhost/searchuser/user I am encountering difficulties wi ...

Struggling to figure out the ::before border trim issue

As I work on designing a banner for a webpage, I have added a sliced bottom right border using the ::before pseudo class. The code snippet I used includes: &::before { content: ""; position: absolute; bottom: 0; right: 0; ...

Display navigation bar upon touch or lift

In the mobile version of a website, there is a fixed navigation bar at the top. The positioning of this navbar is achieved using position:absolute: .navbar-fixed-top{position:absolute;right:0;left:0;z-index:1000; The goal is to make the navbar invisible ...

Identify React Server-Side Component

How can we distinguish between a file or function being executed as part of a React Server Component rendering versus a classic client component rendering ("use client";)? ...

Call the handleSubmit function to execute another function passing in the event parameter

This is React JS. I previously had a functional sendData function that successfully created a new record in my JSON file. Everything was working smoothly until I decided to integrate useForm and add some yup resolvers into the mix. Now, within the <fo ...

Encountering the error "No overload matches this call" while utilizing useQuery in TypeScript may indicate a mismatch in function parameters

My issue lies with TypeScript and types. Here is the API I am working with: export const clientAPI ={ //... getOptions: async (myParam: number) => get<{ options: Options[]; courses: any[] }>(`/courses?myParam=${myParam}`)().then((result) =& ...

Eliminate the preset padding on the left and right sides of the container-fluid in Bootstrap 5

How can I remove the default padding-left and padding-right in a container-fluid using Bootstrap 5? I don't want to use "!important" in my CSS file. I have already tried disabling the default padding with Chrome dev tools but it didn't work. Any ...

Keep the Horizontal Scrollbar in Place at the Bottom of the Screen to Prevent it from Moving

I am experiencing an issue with a div that has horizontal scrolling. This div contains over 1000 lines of data, making it difficult to scroll horizontally because I must first scroll down through all the lines before being able to access the horizontal s ...

What could be causing the error message "Cannot locate cache in 'react'" to appear while attempting to import the cache from React?

Recently, I came across a tutorial on react-query that delves into using the Hydrate component within a Next.js 13 application's app directory for server-side rendering. The guide specifically showcases importing the cache object from React with the f ...

Uncertainty surrounding the effectiveness of the display: block CSS property - my demonstration is not yielding the expected results

I encountered an issue while using display: block. To better understand the problem I'm facing, please check out this example link: Take a look at the HTML code below: <div id="container"> <div id="titleBox"> <p id="myT ...

The alignment of image and text next to each other is not functioning as intended

I've been attempting to display an image and text next to each other, but I'm encountering some issues. The current output looks like the figure below: https://i.stack.imgur.com/WxxrS.jpg The desired layout is as shown in the following link: ht ...

React custom dropdown is failing to update its state

How can I create a custom styled dropdown without using select? I want to update the state value based on click, but it continues to show 'choose' as the default value. Any suggestions on how to make this work properly? import React from "react" ...