How come the changes in my react component's CSS are not updating in real-time?

Question

How come the changes in my react component's CSS are not updating in real-time?

After integrating redux into my create-react-app project, I've been struggling to implement a navigator that highlights the active "page link." To achieve this functionality, I am using a combination of react hooks (to maintain the current page state) and the npm package called classNames.

The code snippet I'm utilizing for this purpose is:

classNames(object['key'] && classes.activeItem)

In this setup, when object['key'] evaluates to true for a specific item activation, the corresponding element receives the activeItem class.

Interestingly, when I replace object['key'] with simply true, it functions as expected. Additionally, upon clicking the item, logging the value of object['key'] also returns true.

However, despite these observations, the mechanism seems to be malfunctioning. Any insights on why this might be happening would be greatly appreciated!

import React, { useEffect, memo } from 'react';
import { bindActionCreators, compose } from 'redux';
import { connect } from 'react-redux';
...

css reactjs webpack sass material-ui

Answer 1

Answer №1

Remember that the function passed to the useEffect hook always runs after rendering.

Your useEffect does not trigger a re-render for the component to reflect changes. Only changes to state can cause a re-render. If you want a re-render, you should first use the useState hook to update the state and then call setState within the useEffect hook. Alternatively, you could include these actions directly in the render cycle (outside of the useEffect hook):

activePage = _.mapValues(activePage, () => false);
activePage[curPage] = true
useEffect(() => {
    if(!curPage){
      onPageChange('search');
    }
});

Upon reviewing your code, it appears you can simplify by using

curPage === 'invite' && classes.itemActiveItem

instead of

activePage['invite'] && classes.itemActiveItem

, removing the unnecessary lines related to the activePage object. This will streamline things for you.

Answer 2

Remember that the function passed to the useEffect hook always runs after rendering.

Your useEffect does not trigger a re-render for the component to reflect changes. Only changes to state can cause a re-render. If you want a re-render, you should first use the useState hook to update the state and then call setState within the useEffect hook. Alternatively, you could include these actions directly in the render cycle (outside of the useEffect hook):

activePage = _.mapValues(activePage, () => false);
activePage[curPage] = true
useEffect(() => {
    if(!curPage){
      onPageChange('search');
    }
});

Upon reviewing your code, it appears you can simplify by using

curPage === 'invite' && classes.itemActiveItem

instead of

activePage['invite'] && classes.itemActiveItem

, removing the unnecessary lines related to the activePage object. This will streamline things for you.

How come the changes in my react component's CSS are not updating in real-time?

Answer №1

Similar questions

Issue with proper mapping of Formik fields and validation using yup on the sign in form is causing a

A distinct handler function designed for a dynamically generated form

:first-child that does not have the class .disabled

Is there a way to randomly change the colors of divs for a variable amount of time?

Error: Definition Already Exists

Determining the height of the tab bar across devices using React-Navigation

Tips for effectively testing a DetailPanel-Property within a React Material Table using Jest

MUI Group Selector - Array of Arrays

The JSON file containing API data is stored within the _next folder, making it easily accessible to anyone without the need for security measures or a login in the Next

What is the best way to track and document the specific Context Provider being utilized while invoking useContext?

What could be causing my component to fail to load properly with Vite?

-=:Heading with a decorative vertical line=:-

CSS shrink effect upon hovering

What is the best way to target specific elements within my array using Jquery?

Can you designate a specific Google font for each language on a webpage?

Modifying the background image of div elements with JQuery in a loop function is ineffective when using Google Chrome

I am looking for guidance on removing the bottom line from the ionic 4 segment indicator. Any advice or tips on

CSS from the parent page is not being applied to AJAX-injected content

There seems to be an issue with webpack as it is currently unable to find any loaders configured to handle this file in pdfjs-dist when trying to access the new URL("./build

What is the best way to maintain the highlighting of a clicked navigation button in CSS?